ngx-datatable的使用

ionic5+angular7混合开发中ngx-datatable的使用

效果图：移动端模式，固定表头和第一列，左右上下滑动

安装环境：

npm install @swimlane/ngx-datatable --save
1

1）先在app.module.ts中引入并注册：
（在ngx-datatable中使用过滤器需要）

import { DateFilterPipe } from "./common/pipes/date-filter/date-filter.pipe";
@NgModule({
   providers: [ DatePipe ]
}）
1
2
3
4

2）在module.ts中引入注册

import { NgxDatatableModule } from '@swimlane/ngx-datatable';

@NgModule({
  imports: [
    NgxDatatableModule
  ],
  declarations: [IroncanMsgPage]
})
1
2
3
4
5
6
7
8

3）在用到的页面.ts中：
引入过滤器：

`import { DateFilterPipe } from "src/app/common/pipes/date-filter/date-filter.pipe";`
1

声明过滤器：

`private dateFilterPipe: DateFilterPipe`
1

应用过滤器：

`{ prop: 'GROSS_WEIGHT_TIME', name: '毛重时间', pipe: this.dateFilterPipe }`
1

4）.html

  
  
1
2
3
4
5
6
7
8
9
10
11
12

//data-filter.pipe 定义时间过滤器

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'dateFilter'
})
export class DateFilterPipe implements PipeTransform {
  transform(value: any, ...args: any[]): any {
    if (value === undefined) {
      return '';
    } else {
      if (value.length === 8) {
        return value.slice(0, 4) + '-' + value.slice(4, 6) + '-' + value.slice(6, 8);
      } else {
        return value.slice(0, 4) + '-' + value.slice(4, 6) + '-' + value.slice(6, 8) + ' ' + value.slice(8, 10) + ':' + value.slice(10, 12);
      }
      }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

//columns 表头

  public rows: any[] = []; //查询数据
  public columns = [
    { prop: 'TPC_NO', name: '罐号', width: 80, frozenLeft: true },
    { prop: 'IR_TAP_NO', name: '铁次号', width: 80 },
    { prop: 'DEST', name: '去向', width: 80 },
    { prop: 'TPC_STATUS', name: '罐子状态', width: 80 },
    { prop: 'GROSS_WEIGHT', name: '毛重', width: 80 },
    { prop: 'GROSS_WEIGHT_TIME', name: '毛重时间', pipe: this.dateFilterPipe },
    { prop: 'BACKN5', name: '皮重', width: 80 },
    { prop: 'TARE_WEIGHT_TIME', name: '皮重时间', pipe: this.dateFilterPipe },
    { prop: 'TRUCK_NO', name: '架号', width: 80 },
    { prop: 'CURRENT_CAR_SEQ', name: '工位号', width: 80 },
    { prop: 'APPLY_FULL_TIME', name: '计量预报时间', pipe: this.dateFilterPipe },
    { prop: 'PIRON_START_TIME', name: '出铁开始时间', pipe: this.dateFilterPipe },
    { prop: 'PIRON_END_TIME', name: '受铁结束时间', pipe: this.dateFilterPipe }
  ];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//后台返回的数据 rows格式：

//参考：
https://stackoverflow.com/questions/57405789/need-to-apply-pipe-for-specific-property-out-of-many-property

官方文档：https://swimlane.gitbook.io/ngx-datatable/api/column/inputs