ng2-smart-table
入門
安裝
你要做的就是運行以下命令：
npm install --save ng2-smart-table
此命令將創建在你的`package.json`文件和安裝包到 npm_modules 文件夾.
實例
最小安裝程序的例子
你首先需要做的就是導入ng2-smart-table directives到你的組件。
import { Ng2SmartTableModule } from 'ng2-smart-table';
然后通過添加模塊的指令列表來注冊它：
// ... @NgModule({ imports: [ // ... Ng2SmartTableModule, // ... ], declarations: [ ... ] }) // ...
現在，我們需要配置表並將其添加到模板中。組件開始工作時唯一需要的設置是列配置。讓我們注冊組件的內部設置屬性，在其中我們希望擁有表並配置一些列（設置文檔）：
settings = { columns: { id: { title: 'ID' }, name: { title: 'Full Name' }, username: { title: 'User Name' }, email: { title: 'Email' } } };
最后，讓我們把ng2-smart-table component inside模板：
// ... @Component({ template: ` <ng2-smart-table [settings]="settings"></ng2-smart-table> ` }) // ...
在這一步你將有一個最小配置的表應該看起來像這樣：
默認情況下，所有函數都可用，並且不需要以某種方式配置它們，所以您已經能夠添加/編輯/刪除行，排序或篩選表等。但感覺好像缺少了什么…對，默認情況下表中沒有數據。要添加一些，讓我們用組件中的對象列表創建數組屬性。請注意，對象鍵與列配置相同。
data = [ { id: 1, name: "Leanne Graham", username: "Bret", email: "Sincere@april.biz" }, { id: 2, name: "Ervin Howell", username: "Antonette", email: "Shanna@melissa.tv" }, // ... list of items { id: 11, name: "Nicholas DuBuque", username: "Nicholas.Stanton", email: "Rey.Padberg@rosamond.biz" } ];
並將數據傳遞到表格：
// ... @Component({ template: ` <ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table> ` }) // ...
現在你有一些數據在表中：
這是一個最小的設置，我們的最終組件應該是這樣的，很簡單，嗯？
import { Component } from '@angular/core';
@Component({
selector: 'basic-example-data',
styles: [],
template: `
<ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
`
})
export class BasicExampleDataComponent {
settings = {
columns: {
id: {
title: 'ID'
},
name: {
title: 'Full Name'
},
username: {
title: 'User Name'
},
email: {
title: 'Email'
}
}
};
data = [
{
id: 1,
name: "Leanne Graham",
username: "Bret",
email: "Sincere@april.biz"
},
// ... other rows here
{
id: 11,
name: "Nicholas DuBuque",
username: "Nicholas.Stanton",
email: "Rey.Padberg@rosamond.biz"
}
];
}
定制的過濾器的例子
獨立的filter的例子
假設你不需要在每個表列中有一個篩選字段，或者要求說搜索字段應該放在表的外面？幸運的是，這是超級容易實現，要做到這一點，我們需要稍微修改我們的基本組件的例子
Data Source
首先你需要知道的是，所有的數據操作和表必須使用數據源表屬性。數據源是在你的數據，可以讓你輕松地修改表數據或訂閱事件修改表行為的抽象。
訪問數據源也可以從表或通過它而不是我們的數據陣列。讓我們做第二個選擇，因為它需要較少的代碼和更說明。讓我們通過修改import語句導入數據源類：
import { Ng2SmartTableModule, LocalDataSource } from 'ng2-smart-table';
需要注意的是，import包含一個localdatasource類（這個詞的地方在這里意味着數據處理在一個本地的瀏覽器，而不是在服務器端）。
然后我們創建一個DataSource實例，通過我們的數據陣列，把它視為一個參數的構造函數：
source: LocalDataSource; // add a property to the component constructor() { this.source = new LocalDataSource(this.data); // create the source }
現在讓我們將源傳遞給表而不是數據數組：
// ... @Component({ template: ` <ng2-smart-table [settings]="settings" [source]="source"></ng2-smart-table> ` }) // ...
在這一點上，如果你看的結果，將沒有任何區別相比，第一個例子。基本上，如果你通過數組表格組件首先要做的是把localdatasource對象數組作為我們在這里做的手工。
現在，我們基本上可以改變在數據源表中的數據以任何方式我們需要過濾，排序，分頁的一些網頁，創建/刪除/修改的行。在我們的例子中，我們需要能夠過濾表外的數據，首先讓我們添加一個搜索提交到模板與監聽器：
// ... @Component({ template: ` <input #search class="search" type="text" placeholder="Search..." (keydown.enter)="onSearch(search.value)"> <ng2-smart-table [settings]="settings" [source]="source"></ng2-smart-table> ` }) // ...
listener code要求數據源的數據過濾
onSearch(query: string = '') { this.source.setFilter([ // fields we want to include in the search { field: 'id', search: query }, { field: 'name', search: query }, { field: 'username', search: query }, { field: 'email', search: query } ], false); // second parameter specifying whether to perform 'AND' or 'OR' search // (meaning all columns should contain search query or at least one) // 'AND' by default, so changing to 'OR' by setting false here }
最后一件事，讓我們隱藏默認表過濾器，以不與我們的獨立：
settings = { columns: { id: { title: 'ID', filter: false }, name: { title: 'Full Name', filter: false }, username: { title: 'User Name', filter: false }, email: { title: 'Email', filter: false } } };
現在表有一個獨立的搜索字段：
同樣的方式，您可以修改表的數據，例如通過從三分之一方窗體中添加行或偵聽一些外部事件。這里是一個完整的組件代碼：
import { Component } from '@angular/core';
@Component({
selector: 'basic-example-source',
styles: [],
template: `
<input #search class="search" type="text" placeholder="Search..." (keydown.enter)="onSearch(search.value)">
<ng2-smart-table [settings]="settings" [source]="source"></ng2-smart-table>
`
})
export class BasicExampleSourceComponent {
settings = {
columns: {
id: {
title: 'ID',
filter: false
},
name: {
title: 'Full Name',
filter: false
},
username: {
title: 'User Name',
filter: false
},
email: {
title: 'Email',
filter: false
}
}
};
data = [
// ... our data here
];
source: LocalDataSource;
constructor() {
this.source = new LocalDataSource(this.data);
}
onSearch(query: string = '') {
this.source.setFilter([
// fields we want to include in the search
{
field: 'id',
search: query
},
{
field: 'name',
search: query
},
{
field: 'username',
search: query
},
{
field: 'email',
search: query
}
], false);
// second parameter specifying whether to perform 'AND' or 'OR' search
// (meaning all columns should contain search query or at least one)
// 'AND' by default, so changing to 'OR' by setting false here
}
}
Checkbox, Select and Completer filter types
關於如何使用內置列篩選器類型的示例：
code
import { Component } from '@angular/core';
@Component({
selector: 'advanced-example-filters',
template: `
<ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
`,
})
export class AdvancedExampleFiltersComponent {
data = [
{
id: 4,
name: 'Patricia Lebsack',
email: 'Julianne.OConner@kory.org',
passed: 'Yes',
},
{
id: 5,
name: 'Chelsey Dietrich',
email: 'Lucio_Hettinger@annie.ca',
passed: 'No',
},
{
id: 6,
name: 'Mrs. Dennis Schulist',
email: 'Karley_Dach@jasper.info',
passed: 'Yes',
},
{
id: 7,
name: 'Kurtis Weissnat',
email: 'Telly.Hoeger@billy.biz',
passed: 'No',
},
{
id: 8,
name: 'Nicholas Runolfsdottir V',
email: 'Sherwood@rosamond.me',
passed: 'Yes',
},
{
id: 9,
name: 'Glenna Reichert',
email: 'Chaim_McDermott@dana.io',
passed: 'No',
},
{
id: 10,
name: 'Clementina DuBuque',
email: 'Rey.Padberg@karina.biz',
passed: 'No',
},
{
id: 11,
name: 'Nicholas DuBuque',
email: 'Rey.Padberg@rosamond.biz',
passed: 'Yes',
},
];
settings = {
columns: {
id: {
title: 'ID',
},
name: {
title: 'Full Name',
filter: {
type: 'list',
config: {
selectText: 'Select...',
list: [
{ value: 'Glenna Reichert', title: 'Glenna Reichert' },
{ value: 'Kurtis Weissnat', title: 'Kurtis Weissnat' },
{ value: 'Chelsey Dietrich', title: 'Chelsey Dietrich' },
],
},
},
},
email: {
title: 'Email',
filter: {
type: 'completer',
config: {
completer: {
data: this.data,
searchFields: 'email',
titleField: 'email',
},
},
},
},
passed: {
title: 'Passed',
filter: {
type: 'checkbox',
config: {
true: 'Yes',
false: 'No',
resetText: 'clear',
},
},
},
},
};
}
API文檔
組件的輸入(Component Inputs)
| Input | Type | Description |
|---|---|---|
| [settings] | Object | Table component configuration object, properties described below表組件配置對象，下面描述的屬性表組件配置對象，下面描述的屬性 |
| [source] | Array|DataSource | Table data, either an array or DataSource object (LocalDataSource currently supported)表中的數據，可以是數組或數據源對象（localdatasource目前支持） |
表配置(Table Configuration)
| Property | Type | Default | Description |
|---|---|---|---|
| Required Table Settings | |||
| columns | Object | n/a | Table column settings, by default an empty object. Example format: columns: { columnKey: { title: 'Some Title' } } Please note, columnKey must be the same as a key in data array objects. |
| Column Settings | List of a column's settings | ||
| title | string | '' | Column title |
| class | string | '' | Column class |
| width | string | '' | Column width, example: '20px', '20%' |
| editable | boolean | true | Whether this column is editable or not |
| type | 'text'|'html'|'custom' | 'text' | If type is text then cell value will be inserted as text. If type is html then cell value will be inserted as html. If type is custom the renderComponent property must be defined. |
| renderComponent | any | null | Custom component that will be responsible for rendering the cell content while in view mode. Type must be custom in order for this to work. You can see an example here |
| editor | Object | n/a | Editor attributes settings |
| editor.type | 'text' | 'textarea' | 'completer' | 'list' | 'checkbox' | 'text' | Editor used when new row is added or edited |
| editor.config | Object | n/a | Editor configuration settings. Mandatory only for editor types completer, list |
| editor.config.true | string | '' | Only on checkbox type. Defines the value to assign when the checkbox is checked. This parameter is optional, if omitted, true will be used. |
| editor.config.false | string | '' | Only on checkbox type. Defines the value to assign when the checkbox is not checked. This parameter is optional, if omitted, false will be used. |
| editor.config.list | Array | [ ] | Only on list type. Example format:{ value: 'Element Value', title: 'Element Title' }Html is supported if column type is 'html' |
| editor.config.completer | Object | n/a | Only on completer type. Example format: Completer configuration settings |
| editor.config.completer.data | Array | [ ] | Autocomplete list data source. Example format: { id: 10, name: 'Nick', email: 'rey@karina.biz' } |
| editor.config.completer.searchFields | string | '' | Comma separated list of fields to search on. Fields may contain dots for nested attributes; if empty or null all data will be returned |
| editor.config.completer.titleField | string | '' | Name of the field to use as title for the list item |
| editor.config.completer.descriptionField | string | '' | Name of the field to use as description for the list item |
| filter | Object | n/a | Column filter attributes settings. This object accepts the same properties as the editor object.The available types are: checkbox, select, completer.The checkbox type accepts one more optional property compared to the editor version: resetText: string. It defines the text of the button to reset the checkbox selection.Click here to see an example on how to configure it. |
| valuePrepareFunction | Function | n/a | Function run against a value before it gets inserted into a cell. You can use it to modify how a value is displayed in the cell. This function will be invoked with 2 parameters: cell, row |
| sort | boolean | true | Column sort settings, enable/disable. |
| sortDirection | 'asc'|'desc' | n/a | Sort table by this column with this direction by default. Applied only when sort = true. Note: multiple sort option is not supported yet, so sortDirection can be applied to only one column per table. |
| compareFunction | Function | n/a | Function run against the values to sort the table |
| filter | boolean | true | Column filter settings, enable/disable |
| filterFunction | Function | n/a | Function run against the column value when filtering is happening |
| Other Table Settings | |||
| mode | 'external'|'inline' | 'inline' | Determines how to react on action links (Add, Edit, Delete). 'external' - just trigger the events (LINK HERE). 'inline' - process internally, show forms/inputs/etc |
| hideHeader | 'boolean' | false | Set to true to not display the table header (which includes table column titles) |
| hideSubHeader | 'boolean' | false | Set to true to not display the table sub-header (which includes filters and global table actions (currently - Add action)) |
| noDataMessage | string | 'No data found' | Message shown when there is no data in the table |
| attr | Object | n/a | Table attributes settings |
| attr.id | string | '' | Table element id |
| attr.class | string | '' | Table element class |
| actions | Object | n/a | Settings for the table actions |
| actions.columnTitle | string | 'Actions' | Actions column title |
| actions.add | boolean | true | Show/not show Add button |
| actions.edit | boolean | true | Show/not show Edit button |
| actions.delete | boolean | true | Show/not show Delete button |
| actions.position | 'left'|'right' | 'left' | Choose actions column position |
| filter | Object | n/a | Settings for the table filter |
| filter.inputClass | string | '' | Filter input class |
| edit | Object | n/a | Edit action settings |
| edit.inputClass | string | '' | Editing form input class |
| edit.editButtonContent | string | 'Edit' | Edit row button content/title |
| edit.saveButtonContent | string | 'Update' | Update button content/title |
| edit.cancelButtonContent | string | 'Cancel' | Cancel button content/title |
| edit.confirmSave | boolean | false | Enable/disable (confirmEdit) event. If enabled data will be edited only if confirm.resolve() called. |
| add | Object | n/a | Add action settings |
| add.inputClass | string | '' | New row input class |
| add.addButtonContent | string | 'Add New' | Add New button content/title |
| add.createButtonContent | string | 'Create' | Create button content/title |
| add.cancelButtonContent | string | 'Cancel' | Cancel button content/title |
| add.confirmCreate | boolean | false | Enable/disable (confirmCreate) event. If enabled data will be added only if confirm.resolve() called. |
| delete | Object | n/a | Delete action settings |
| delete.deleteButtonContent | string | 'Delete' | Delete row input class |
| delete.confirmDelete | boolean | false | Enable/disable (confirmDelete) event. If enabled data will be deleted only if confirm.resolve() called. |
| pager | Object | n/a | Pager settings |
| pager.display | boolean | true | Whether to display the pager or not |
| pager.perPage | number | 10 | Rows per page |
組件輸出/事件(Component Outputs/Events)
| Event | Arguments | Description |
|---|---|---|
| (rowSelect) | event: Object, consist of:
|
Triggered once a row is selected (either clicked or selected automatically (after page is changed, after some row is deleted, etc)). |
| (userRowSelect) | event: Object, consist of:
|
Triggered only on a user click event. |
| (mouseover) | event: Object, consist of:
|
Triggered only on a user mouseover event. |
| (create) | event: Object, consist of:
|
Triggered once a Create button clicked. Triggered only if table mode = external. |
| (createConfirm) | event: Object, consist of:
|
Triggered once a Create button clicked. Triggered only if table confirmCreate = true and mode = inline. Allows you to confirm changes before they are applied to the table data source. |
| (edit) | event: Object, consist of:
|
Triggered once an Edit button clicked on a row. Triggered only if table mode = external. |
| (editConfirm) | event: Object, consist of:
|
Triggered once a Save button clicked. Triggered only if table confirmSave = true and mode = inline. Allows you to confirm changes before they are applied to the table data source. |
| (delete) | event: Object, consist of:
|
Triggered once a Delete button clicked on a row. Triggered only if table mode = external. |
| (deleteConfirm) | event: Object, consist of:
|
Triggered once a Delete button clicked. Triggered only if table confirmDelete = true and mode = inline. Allows you to confirm changes before they are applied to the table data source. |
數據源的方法(Data Source Methods)
| Method | Arguments | Description |
|---|---|---|
| load |
|
Reload table with new data. For example if some data has received from the server. |
| prepend |
|
Add a new element to the beginning of the table. |
| append |
|
Add a new element to the end of the table. This also will switch current page to the last one. |
| add |
|
Add a new element to the table. |
| remove |
|
Remove the element from the table. |
| update |
|
Update the element in the table. |
| find |
|
Find the element in the table. |
| getElements | n/a | Get elements for current sort, filter and page. |
| getFilteredAndSorted | n/a | Get sorted, filtered and not paginated elements. |
| getAll | n/a | Get all data source elements. |
| setSort |
|
Set table sorts, example: this.source.setSort([{ field: 'id', direction: 'asc' }]); |
| setFilter |
|
Set table filters, example: this.source.setFilter([{ field: 'id', search: 'foobar' }, { field: 'name', search: 'foobar' }]); |
| addFilter |
|
Set table filter for one column, example: this.source.addFilter({ field: 'id', search: 'foobar' }); |
| setPaging |
|
Set table pagination settings |
| setPage |
|
Set table page |
| reset |
|
Set data source to first page with empty filter and empty sort. |
| refresh | n/a | Refresh data in the data source. In most cases you won't need this method. |
| count | n/a | Return count of element in the data source. |
| empty | n/a | Empty the data source. |