@2aminternal/ngx-table-view 中文文档教程

Question

ngx-table-view

Angular 6+ Table View with template rendering

Usage

1. Import table view module in your app.module.ts or preferred module.

import { TableViewModule } from '@2aminternal/ngx-table-view';

@NgModule({
  imports: [
    TableViewModule
  ],
  providers: []
})
export class YourModule { }

2. Use the component in your application:

<ngx-table-view [provider]="myProvider">
    <ngx-tbl-col name="My Column 1" key="myColumn1"></ngx-tbl-col>
    <ngx-tbl-col name="My Column 2" key="myColumn2"></ngx-tbl-col>
</ngx-table-view>

DataProvider

ngx-table-view 使用 DataProvider 工作，该对象包含有关过滤器、排序和分页的所有数据信息。 您需要将它传递给表视图，以便在表中显示数据。

要实例化数据提供者对象，只需执行以下操作：

this.myProvider = new DataProvider(
    [
        {myColumn1: 'My Data', myColumn2: 'Another data'},
        {myColumn1: 'My Data2', myColumn2: 'Another data 2'}
    ]
);

表视图将从数据提供者中传递的项目中读取每一行，并通过列定义运行它们。 在上面的例子中只有 一列“myColumn”，将为每个项目呈现 item.myColumn。

排序

要传递排序信息，请使用：

this.myProvider = new DataProvider(
    [
        {myColumn1: 'My Data', myColumn2: 'Another data'},
        {myColumn1: 'My Data2', myColumn2: 'Another data 2'}
    ],
    {
        items: ['myColumn'];
        multisort: false;
        sorted_by: {}
    }
);

或设置它：

this.myProvider.sort = {
    items: ['myColumn'];
    multisort: false;
    sorted_by: {
        'myColumn': 'ascending'
    }
};

参数：

• items - column keys which are sortable.
• multisort - whether or not multisort is allowed.
• sorted_by - Definitions of which column its is already sorted by.

可以使用DataProvider 中的方法以编程方式修改排序。

不设置此参数将关闭排序。

分页

要传递分页信息，请使用：

this.myProvider = new DataProvider(
    [
        {myColumn1: 'My Data', myColumn2: 'Another data'},
        {myColumn1: 'My Data2', myColumn2: 'Another data 2'}
    ],
    {
        items: ['myColumn'],
        multisort: false,
        sorted_by: {}
    },
    {
        total_count: 2,
        page: 1,
        page_size: 10
    }
);

或设置它：

this.myProvider.pagination = {
    total_count: 2,
    page: 1,
    page_size: 10
};

参数：

• total_count - Total number of items available.
• page - Current page displayed.
• page_size - Number of items per page.

可以使用 DataProvider 中的方法以编程方式修改分页。

不设置此参数将关闭分页。

过滤器

要在数据提供者中设置过滤器使用：

this.myProvider.filter.set('filterParam1', 'someValue1');
this.myProvider.filter.set('filterParam2', 'someValue2');

要对过滤器中的变化做出反应，您可以使用：

this.myProvider.filter.onChange.subscribe(() => {
    console.log('filter changed');
});

监听变化 要对数据提供程序中的任何更改（过滤器、排序、分页）做出反应，您可以简单地听取它们。

this.myProvider.onChange.subscribe((change: Change) => {
    console.log('Change happened', change.type, change.value);
});

此事件将在数据提供者的每次更改时发生，您可以使用该类型来了解发生了什么更改。

Templating

ngx-table-view 支持列模板，您可以在组件中定义它们：

<ngx-table-view [provider]="myProvider">
    <ng-template ngxTblCol name="My Column 1" key="myColumn1" let-cell>
        This is a custom template. Value: {{ cell.value }}
    </ng-template>
    <ngx-tbl-col name="My Column 2" key="myColumn2" let-cell>

    </ngx-tbl-col>
</ngx-table-view>

如果您需要将数据从父组件传递到单元格，您可以使用：

<ngx-table-view [provider]="myProvider">
    <ng-template ngxTblCol name="My Column 1" key="myColumn1" [pass]="{myData: 'myValue'}" let-cell>
        This is a custom template. Passed data: {{ cell.passed.myData }}
    </ng-template>
</ngx-table-view>

如果您将数据从列外部发送到父组件，您可以使用：

<ngx-table-view [provider]="myProvider">
    <ng-template ngxTblCol name="My Column 1" key="myColumn1" (trigger)="handleMyData($event)" let-cell>
        This is a custom template. Passed data: {{ cell.trigger('pass', 'data', 'into', 'parent') }}
    </ng-template>
</ngx-table-view>

然后在你的组件

handleMyData(data) {
    console.log('passed argument 1', data[0]);
    console.log('passed argument 2', data[1]);
    console.log('passed argument 3', data[2]);
}

中：单元格中的可用数据：

• name - column name
• key - column key used to get the data. Can be in dot notation. If it's in dot notation (eg. object.innerprop.innerprop.value) then the object will be traversed along this path to get the value.
• passed - passed data from [passed] param.
• trigger - trigger function which will send the data into (trigger) event.
• provider - Whole DataProvider object
• row - Current row
• value - Current value

如果你想使用外部模板作为列中的参考，你可以这样做：

<ngx-table-view [provider]="myProvider">
    <ngx-tbl-col valueTpl="myTemplate" name="My Column 1" key="myColumn1"></ngx-tbl-col>
    <ngx-tbl-col valueTpl="myTemplate" name="My Column 2" key="myColumn2"></ngx-tbl-col>
</ngx-table-view>
<ng-template #myTemplate let-cell>
    This is a my custom template. Passed data: {{ cell.value }}
</ng-template>

如果你想在表头中呈现数据，你也可以使用模板：

<ngx-table-view [provider]="myProvider">
    <ngx-tbl-col valueTpl="myTemplate" filterTpl="myFilter" (trigger)="handleData($event)" name="My Column 1" key="myColumn1"></ngx-tbl-col>
    <ngx-tbl-col valueTpl="myTemplate" filterTpl="myFilter" (trigger)="handleData($event)" name="My Column 2" key="myColumn2"></ngx-tbl-col>
</ngx-table-view>
<ng-template #myTemplate let-cell>
    This is a my custom template. Passed data: {{ cell.value }}
</ng-template>
<ng-template #myFilter let-cell>
    My Custom filter
    <input name="text" [attr.placeholder]="cell.name" (input)="cell.trigger('filter', $event.value)" />
</ng-template>

然后在你的组件中您可以使用：

handleData(data) {
   if (data[0] === 'filter') {
       console.log('handle filter. Value:', data[1]);
       return;
   }

   // Handle other code.
}

Definitions

ngx-table-view

输入道具：

provider: DataProvider<any>; // Data Provider
emptyText: string = 'No results found.'; // Text when there is no data in data provider.
loadingMode: boolean = false; // Whether or not table is in loading mode.
loadingText: string = 'Loading...'; // Text to be shown when table is in loading mode.
sortUpClass: string = 'sort-up-arrow'; // Sort up class for the column sort.
sortDownClass: string = 'sort-down-arrow'; // Sort down class for the column sort.

ngx-tbl-col or directive: ngxTblCol

输入道具：

name: string; // Column name which will be displayed in the table top.
key: string; // Key which will be used to get data. Can be in dot format (eg. object.param.param2.param3)
sortKey: string; // String which defines which key in SortInfo.sorted_by is used for this column.
pass: any; // Data passed into the template.
valueRenderer: RendererFn; // Value renderer function which will be called when rendering the cell value.
filterTpl: TemplateRef<any>; // Filter template - template which will be rendered in the header of the table.
valueTpl: TemplateRef<any>; // Value template - template which will be rendered for every cell.
headerClass: any; // Table header class which will be used when rendering header for this column.
cellClass: any; // Cell class which will be used when rendering every cell.

输出道具：

trigger: EventEmitter<any> = new EventEmitter<any>(); // Trigger handler for the column

Building

要构建 dist 文件夹，请使用 bash build.sh。

使用 angular ng-packagr 完成构建。