@activewidgets/angular 中文文档教程

发布于 3年前 浏览 11 项目主页 更新于 3年前

ActiveWidgets/Angular • Datagrid

npm versionnpm 下载Github 问题Github repo

ActiveWidgets 是一个多框架 UI 组件库。 此包为 Angular 提供了datagrid 组件

现场演示 / 开发者指南 / API 参考

Datagrid demo

Installation

添加 @activewidgets/angular到你的项目依赖 -

> npm i --save @activewidgets/angular

Usage

首先你应该在你的 AppModule 导入中包含 AxModule -

import { AxModule } from "@activewidgets/angular";
import '@activewidgets/angular/css';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AxModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

然后你可以使用 ax-datagrid 和其他 ax-...组件模板中的标签 -

<ax-datagrid [rows]="rows"></ax-datagrid>

实例 | github 上的源 | 在 Codesandbox 上编辑

Data properties

你必须提供 columnsrows 数据网格的属性显示一些数据。 每个 column 对象的属性定义了数据的呈现方式 -

  • field - where the cell data comes from (string|function)
  • header - column header (string|object)
  • width - column width (number, in pixels)
  • align - cell text alignment (left|right|center)
  • format - number/date format (string|function)
  • fixed - fixed (true/false) for columns on the left or right side

style(字符串|对象)或 className 属性允许更改样式列和单元格元素。

const columns = [
  {header: 'Code', field: 'customerID', width: 80, style: 'background:#def', fixed: true},
  {header: 'Company Name', field: 'companyName', width: 160},
  {header: 'Contact', field: 'contactName', width: 120},
  {header: 'Title', field: 'contactTitle', width: 120},
  {header: 'Address', field: 'address', width: 120, align: 'right'}
];

const rows = northwind.customers;
<ax-datagrid [columns]="columns" [rows]="rows"></ax-datagrid>

实例 | github 上的源 | 在 Codesandbox 上编辑

User events

除了数据网格发出的标准 DOM 键盘和鼠标事件合成的 mouse 事件,可以更轻松地找到受用户操作影响的元素 -

function onMouse({row, column}){
    alert(`row ${row.key} clicked!`);
}
<ax-datagrid (mouse)="onMouse($event)" [columns]="columns" [rows]="rows"></ax-datagrid>

实例 | github 上的源 | 在 Codesandbox 上编辑

More info


ActiveWidgets

ActiveWidgets/Angular • Datagrid

npm versionnpm downloadsGithub issuesGithub repo

ActiveWidgets is a multi-framework UI component library. This package provides datagrid component for Angular.

Live demo / Developer guide / API reference

Datagrid demo

Installation

Add @activewidgets/angular to your project dependencies -

> npm i --save @activewidgets/angular

Usage

First you should include AxModule in your AppModule imports -

import { AxModule } from "@activewidgets/angular";
import '@activewidgets/angular/css';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AxModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Then you can use ax-datagrid and other ax-... tags in your component templates -

<ax-datagrid [rows]="rows"></ax-datagrid>

Live example | Source on github | Edit on Codesandbox

Data properties

You have to provide columns and rows properties to the datagrid to show some data. The properties of each column object define how the data will be rendered -

  • field - where the cell data comes from (string|function)
  • header - column header (string|object)
  • width - column width (number, in pixels)
  • align - cell text alignment (left|right|center)
  • format - number/date format (string|function)
  • fixed - fixed (true/false) for columns on the left or right side

The style (string|object) or className properties allow to change the styling of the column and cell elements.

const columns = [
  {header: 'Code', field: 'customerID', width: 80, style: 'background:#def', fixed: true},
  {header: 'Company Name', field: 'companyName', width: 160},
  {header: 'Contact', field: 'contactName', width: 120},
  {header: 'Title', field: 'contactTitle', width: 120},
  {header: 'Address', field: 'address', width: 120, align: 'right'}
];

const rows = northwind.customers;
<ax-datagrid [columns]="columns" [rows]="rows"></ax-datagrid>

Live example | Source on github | Edit on Codesandbox

User events

In addition to the standard DOM keyboard and mouse events the datagrid emits composite mouse event which makes it easier to find the elements affected by the user action -

function onMouse({row, column}){
    alert(`row ${row.key} clicked!`);
}
<ax-datagrid (mouse)="onMouse($event)" [columns]="columns" [rows]="rows"></ax-datagrid>

Live example | Source on github | Edit on Codesandbox

More info


ActiveWidgets

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文