ngx-smart-table备忘录

Author Avatar
Wooyme 10月 28, 2019

基本信息

官网

https://akveo.github.io/ng2-smart-table/

github

https://github.com/akveo/ng2-smart-table

examples

https://github.com/akveo/ng2-smart-table/tree/master/projects/demo/src/app/pages

基本用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@Component({
  selector: 'ngx-data',
  template: `<ng2-smart-table [settings]="settings" [source]="source">`,
})
export class DataComponent {
  option:any;
  settings = {
    pager: {
      display: true,
      perPage: 50
    },
    actions: {  //修改ng2-smart-table自带的action列
      add: false,  
      edit: false,
      delete: false,
    },
    hideSubHeader: true, //隐藏顶栏
    columns: {
      col1: {
        title: '值',
        type: 'string',
      },
      col2: {
        title: '更新时间',
        type: 'string',
      },
    },
  };
  source: LocalDataSource;  
}

分页器

1
2
3
4
pager:{
    display: true , //是否显示分页器 
    perPage: 50 //每页显示数量
}

后端分页

后端分页可以继承LocalDataSource,写一个新的DataSource，重写getElements()和count()函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
export class MyDataSource extends LocalDataSource {
  all: number;
  devName: string;
  namFilter:string;
  constructor(private api: MyService) {
    super()
  }

  count(): number {
    return this.all;
  }

  getElements(): Promise<any> {
    return this.api.getData(nameFilter).pipe(map(result=>{  //假设返回为{'count':100,data:[.......]}
        this.all = result.count;
        return result.data;
    })).toPromise();
  }
}

使用方式

1
2
3
4
5
6
7
source:MyDataSource = new DeviceDataSource(this.api);

search(name:string){
    this.source.nameFilter = name;
    this.source.setPage(1);
    this.source.refresh();
}

自定义渲染

方案1

1
2
3
4
5
6
columns: {
      col1: {
        title: '链接',
        type: 'html',
      },
}

直接修改值为html代码

方案2 自定义渲染器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import {Component, Input, OnInit} from "@angular/core";
import {ViewCell} from "ng2-smart-table";

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

  @Input() value: string | number; //对应列的值
  @Input() rowData: any; //本行所有值:{'col1':'value1','col2','value2'}

  ngOnInit() {
    this.renderValue = value;
  }

  onClick(){
      console.log(rowData);
  }
}
1
2
3
4
5
6
7
columns: {
      col1: {
        title: '链接',
        type: 'custom',
        renderComponent: CustomRender
      },
}