ng2-smart-table文档

1，自定义搜索

template: `
    <input #search class="search" type="text" placeholder="Search..." (keydown.enter)="onSearch(search.value)">
    <ng2-smart-table [settings]="settings" [source]="source"></ng2-smart-table>
  `,

onSearch(query: string = '') {
    this.source.setFilter([
      // fields we want to inclue in the search
      {
        field: 'id',
        search: query,
      },
      {
        field: 'name',
        search: query,
      },
      {
        field: 'username',
        search: query,
      },
      {
        field: 'email',
        search: query,
      },
    ], false);

2

name: {
        title: 'Full Name',
        filter: {
          type: 'list',   // 下拉选择筛选
          config: {
            selectText: 'Select...',  //　输入框中默认内容
            list: [       // 下拉选择的内容
            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',  // 复选框搜索，选中时，显示为YES的数据，不选中时，显示为NO的数据，yes,YES一样的效果，不区分大小写
          config: {
            true: 'Yes',
            false: 'No',
            resetText: 'clear',
          },
        },
      },

  id: {
    title: 'ID',
    editable: false, // 是否可编辑，默认为true 可编辑
  },

3 load，server 的用法，加载远程数据

 source: LocalDataSource;
constructor(protected service: BasicExampleLoadService) {
    this.source = new LocalDataSource();

    this.service.getData().then((data) => {
      this.source.load(data);
    });
  }

source: ServerDataSource;

  constructor(http: Http) {
    this.source = new ServerDataSource(http, { endPoint: 'https://jsonplaceholder.typicode.com/photos' });
  }

4 editor数据编辑自定义

name: {
        title: 'Full Name',
        editor: {
          type: 'completer',  // 输入提示功能
          config: {
            completer: {
              data: this.data,
              searchFields: 'name',
              titleField: 'name',
              descriptionField: 'email',
            },
          },
        },

username: {
        title: 'User Name',
        type: 'html',
        editor: {
          type: 'list',  // 下拉选择
          config: {
            list: [
                    { value: 'Antonette', title: 'Antonette' }, 
                    { value: 'Bret', title: 'Bret' }, 
                    {value: '<b>Samantha</b>',title: 'Samantha'}],
          },
        },

5 自定义table列

name: {
        title: 'Full Name',
        type: 'custom',
        renderComponent: CustomRenderComponent, // 列组件
      },

相当于子组件

import { ViewCell } from '../../../../ng2-smart-table';
@Component({
  template: `
    {{renderValue}}
  `,
})
export class CustomRenderComponent implements ViewCell, OnInit {

  renderValue: string;

  @Input() value: string | number; // 当前列的值
  @Input() rowData: any; // 当前行的值

  ngOnInit() {
    this.renderValue = this.value.toString().toUpperCase();
  }

}

5 自定义输入组件

link: {
        title: 'Link',
        type: 'html',
        editor: {
          type: 'custom',
          component: CustomEditorComponent,
        },
      },

// 相当于子组件

import { Cell, DefaultEditor, Editor } from '../../../../ng2-smart-table';


@Component({
  template: `
    Name: <input [ngClass]="inputClass"
            #name
            class="form-control short-input"
            [name]="cell.getId()"
            [disabled]="!cell.isEditable()"
            [placeholder]="cell.getTitle()"
            (click)="onClick.emit($event)"
            (keyup)="updateValue()"
            (keydown.enter)="onEdited.emit($event)"
            (keydown.esc)="onStopEditing.emit()"><br>
    Url: <input [ngClass]="inputClass"
            #url
            class="form-control short-input"
            [name]="cell.getId()"
            [disabled]="!cell.isEditable()"
            [placeholder]="cell.getTitle()"
            (click)="onClick.emit($event)"
            (keyup)="updateValue()"
            (keydown.enter)="onEdited.emit($event)"
            (keydown.esc)="onStopEditing.emit()">
    <div [hidden]="true" [innerHTML]="cell.getValue()" #htmlValue></div>
  `,
})
export class CustomEditorComponent extends DefaultEditor implements AfterViewInit {

  @ViewChild('name') name: ElementRef;
  @ViewChild('url') url: ElementRef;
  @ViewChild('htmlValue') htmlValue: ElementRef;

  constructor() {
    super();
  }

  ngAfterViewInit() {
    if (this.cell.newValue !== '') {
      this.name.nativeElement.value = this.getUrlName();
      this.url.nativeElement.value = this.getUrlHref();
    }
  }

  updateValue() {
    const href = this.url.nativeElement.value;
    const name = this.name.nativeElement.value;
    this.cell.newValue = `<a href='${href}'>${name}</a>`;
  }

  getUrlName(): string {
    return this.htmlValue.nativeElement.innerText;
  }

  getUrlHref(): string {
    return this.htmlValue.nativeElement.querySelector('a').getAttribute('href');
  }
}

6 自定义td组件

button: {
        title: 'Button',
        type: 'custom',
        renderComponent: ButtonViewComponent,
        onComponentInitFunction(instance) {
          instance.save.subscribe(row => {
            alert(`${row.name} saved!`)
          });
        }
      },

// 子组件

@Component({
  selector: 'button-view',
  template: `
    <button (click)="onClick()">{{ renderValue }}</button>
  `,
})
export class ButtonViewComponent implements ViewCell, OnInit {
  renderValue: string;

  @Input() value: string | number;
  @Input() rowData: any;

  @Output() save: EventEmitter<any> = new EventEmitter();

  ngOnInit() {
    this.renderValue = this.value.toString().toUpperCase();
  }

  onClick() {
    this.save.emit(this.rowData);
  }
}

7 自定义操作栏

<ng2-smart-table [settings]="settings" [source]="data" (custom)="onCustom($event)"></ng2-smart-table>

settings = {
    actions: {
      custom: [
        {
          name: 'view',
          title: '<i class="aa">aa</i> ',
        },


 onCustom(event) {
    alert(`Custom event '${event.action}' fired on row №: ${event.data.id}`)
  }

8 Component Outputs/Events 触发事件

@Component({
  selector: 'advance-example-comfirm',
  template: `
    <ng2-smart-table
      [settings]="settings"
      [source]="source"
      (deleteConfirm)="onDeleteConfirm($event)"
      (editConfirm)="onSaveConfirm($event)"
      (createConfirm)="onCreateConfirm($event)"></ng2-smart-table>
  `,
})

9 多选框

settings = {
    selectMode: 'multi',

10 自定义操作按钮

add: {
            addButtonContent: '<i class="fa fa-plus-square-o" aria-hidden="true"></i>',
            createButtonContent: '<i class="fa fa-check-square"></i>',
            cancelButtonContent: '<i class="fa fa-minus-square"></i>'
        },
        edit: {
            editButtonContent: '<i class="fa fa-pencil"></i>',
            saveButtonContent: '<i class="fa fa-check-square"></i>',
            cancelButtonContent: '<i class="fa fa-minus-square"></i>'
        },
        delete: {
            deleteButtonContent: '<i class="fa fa-trash"></i>',
            confirmDelete: true
        },
        actions:{
            columnTitle: '操作',  
            add: false           // 隐藏添加操作，还可以设置其他的操作按钮
        },

11 为table添加class类

attr:{
            class: "aaa"
        },

12 隐藏头部信息

hideHeader: true, // 隐藏头部

hideSubHeader: true, // 隐藏添加数据行

13 所有参数配置

columns Settings
    |
    |----title: thead 中的标题
    |----class: 列class类
    |----width: 列宽度
    |----editable：是否可编辑
    |----type：'text'|'html'|'custom' 列内容，html,custom自定义列
    |----renderComponent：自定义列组件，需要配合‘custom’一起使用
    |----filter: boolean 是否启用内嵌过滤功能
    |----sort：是否启用排序
    |----sortDirection：'asc'|'desc'
    |----compareFunction： 对值进行排序
    |----filterFunction：当过滤发生时，函数会针对列值运行
    |----valuePrepareFunction 插入到单元格之前对值进行运算。您可以使用它来修改单元格中显示值的方式。将使用2个参数调用此函数：单元格，行
    |
    editor
        |
        |----type：'text' | 'textarea' | 'completer' | 'list' | 'checkbox' 编辑输入框的类型
        |----config：编辑输入框配置
              |
              |----true：string 需要配合| 'checkbox' 一起使用，为true是，列内容显示为string。
              |----false: string 需要配合| 'checkbox' 一起使用，为true是，列内容显示为string。
              |----list: array 需要配合|list 一起使用，示例：{ value: 'Element Value', title: 'Element Title' }
              |----completer： 输入提示功能
                    |
                    |----data：Array 提示数据
                    |----searchFields： 提示字段数据
                    |----titleField：title字段
                    |----descriptionField：要用作列表项目描述的字段名称
    filter 列过滤器属性设置，类似editor配置对象
        |
        |----type：'text' | 'textarea' | 'completer' | 'list' | 'checkbox' 编辑输入框的类型
        |----其他参考editor对象
        |
mode 确定如何对动作链接进行反应（添加，编辑，删除）。'external'|'inline'
    |
    |----'external' - just trigger the events (LINK HERE).“外部” - 只是触发事件（LINK HERE）。
    |----'inline' - process internally, show forms/inputs/etc“内联” - 过程内部，展示输入/等
    |
hideHeader 隐藏头部
hideSubHeader 隐藏添加操作栏
noDataMessage 当表中没有数据时显示的消息
attr table的属性设置
    |
    |----id: table的id设置
    |----class:
    |
actions 表操作的设置
    |
    |----columnTitle: 操作列标题
    |----add： boolean 是否展示添加按钮
    |----edit:
    |----delete: 
    |----position: 'left'|'right'选择操作列位置
filter 表过滤器的设置
    |
    |----inputClass: 设置表单的输入类
    |
edit 编辑按钮设置
    |
    |----editButtonContent： 自定义编辑按钮
    |----saveButtonContent: 自定义保存按钮
    |----cancelButtonContent：
    |----confirmSave：boolean是否启用保存数据时提示
add 添加操作设置
    |
    |----inputClass：新行输入类
    |----addButtonContent：string添加按钮内容 默认为'Add New' 
    |----createButtonContent：string 默认为'Create' 
    |----cancelButtonContent
    |----confirmCreate：添加数据时提示boolean
delete 删除操作配置
    |
    |---deleteButtonContent：默认为'Delete' 
    |---.confirmDelete 删除数据是否提示
    |
pager: 分页设置
    |
    |---display：boolean 是否显示分页
    |----perPage：number 分页条树，默认为10

14 绑定的事件

(rowSelect) 选中一行时触发

(userRowSelect) 用户点击时触发

(mouseover) 鼠标移动时触发

(create) 触发创建事件

(createConfirm) 触发创建提示

(edit) 触发编辑事件

(editConfirm) 触发编辑事件提示

(delete) 触发删除事件

(deleteConfirm) 触发删除提示事件

15 Data Source 方法 this.source._

load: 加载数据

prepend：将数据添加到表开头

append:在表的末尾添加一个新元素。这也将切换当前页面到最后一页。

add: 在表中添加一个新元素。

remove: 在表中删除元素

update：更新数据

find：在表中查找数据

getElements: 获取当前排序，过滤器和页面的元素。

getFilterdAndSorted: 获取排序，筛选和不分页元素。

getAll: 获取所有数据源元素。

setSort: 设置排序示例: this.source.setSort([{ field: 'id', direction: 'asc' }]);

setFilter：设置过滤

addFilter：添加过滤

setPaging：设置分页

setPage：设置页面

reset: 将数据源设置为具有空过滤器和空排序的第一页。

refresh: 刷新数据源中的数据。在大多数情况下，您不需要这种方法。

count: 返回数据源中的元素数。

empty: 清空数据源。

ng2-smart-table文档

1，自定义搜索

2

3 load，server 的用法，加载远程数据

4 editor数据编辑自定义

5 自定义table列

5 自定义输入组件

6 自定义td组件

7 自定义操作栏

8 Component Outputs/Events 触发事件

9 多选框

10 自定义操作按钮

11 为table添加class类

12 隐藏头部信息

13 所有参数配置

14 绑定的事件

15 Data Source 方法 this.source._

2 articles

results for ""

No results matching ""

ng2-smart-table文档

1， 自定义搜索

2

3 load，server 的用法，加载远程数据

4 editor数据编辑自定义

5 自定义table列

5 自定义输入组件

6 自定义td组件

7 自定义操作栏

8 Component Outputs/Events 触发事件

9 多选框

10 自定义操作按钮

11 为table添加class类

12 隐藏头部信息

13 所有参数配置

14 绑定的事件

15 Data Source 方法 this.source._

2 articles

results for ""

No results matching ""

1，自定义搜索