Angular2 ng2-smart-table

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',
          },
        },
      },
    },
  };
}

View Code

 

 

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: data: Object - selected row data object source: DataSource - table data source	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: data: Object - selected row data object source: DataSource - table data source	Triggered only on a user click event.
(mouseover)	event: Object, consist of: data: Object - highlighted row data object source: DataSource - table data source	Triggered only on a user mouseover event.
(create)	event: Object, consist of: source: DataSource - table data source	Triggered once a Create button clicked. Triggered only if table mode = external.
(createConfirm)	event: Object, consist of: newData: Object - data entered in a new row source: DataSource - table data source confirm: Deferred - Deferred object with resolve(newData: Object) and reject() methods.	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: data: Object - row data object source: DataSource - table data source	Triggered once an Edit button clicked on a row. Triggered only if table mode = external.
(editConfirm)	event: Object, consist of: data: Object - original row data newData: Object - edited data source: DataSource - table data source confirm: Deferred - Deferred object with resolve(newData: Object) and reject() methods.	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: data: Object - row data object source: DataSource - table data source	Triggered once a Delete button clicked on a row. Triggered only if table mode = external.
(deleteConfirm)	event: Object, consist of: data: Object - data object to delete source: DataSource - table data source confirm: Deferred - Deferred object with resolve() and reject() methods.	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	data: Array - data to load into the table	Reload table with new data. For example if some data has received from the server.
prepend	element: Object - object to add	Add a new element to the beginning of the table.
append	element: Object - object to add	Add a new element to the end of the table. This also will switch current page to the last one.
add	element: Object - object to add	Add a new element to the table.
remove	element: Object - object to remove	Remove the element from the table.
update	element: Object - object to update values: Object - object with new values	Update the element in the table.
find	element: Object - object to 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	conf: Array - array of sort setting objects, object format is:doEmit: boolean - emit event (to refresh the table) or not, default = true field - string - columnKey direction - string|null - 'asc'|'desc'|null - sort direction compare - Function|null - custom compare function	Set table sorts, example: this.source.setSort([{ field: 'id', direction: 'asc' }]);
setFilter	conf: Array - array of filter setting objects, object format is: andOperator: boolean - how to process multiple filters (as AND or as OR), default = true (AND) field - string - columnKey search - string - search query filter - Function|null - custom filter function doEmit: boolean - emit event (to refresh the table) or not, default = true	Set table filters, example: this.source.setFilter([{ field: 'id', search: 'foobar' }, { field: 'name', search: 'foobar' }]);
addFilter	conf: Object - one filter object, format is: andOperator: boolean - how to process multiple filters (as AND or as OR), default = true (AND) field - string - columnKey search - string - search query filter - Function|null - custom filter function doEmit: boolean - emit event (to refresh the table) or not, default = true	Set table filter for one column, example: this.source.addFilter({ field: 'id', search: 'foobar' });
setPaging	page: number - page number perPage: number - about per page doEmit: boolean - emit event (to refresh the table) or not, default = true	Set table pagination settings
setPage	page: number - page number doEmit: boolean - emit event (to refresh the table) or not, default = true	Set table page
reset	silent: boolean - if true - you have to additionally call `refresh` to reflect the changes	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.