ngx-datatable的使用

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

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

安装环境：

npm install @swimlane/ngx-datatable --save

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

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

2）在module.ts中引入注册

import { NgxDatatableModule } from '@swimlane/ngx-datatable';@NgModule({imports: [NgxDatatableModule],declarations: [IroncanMsgPage]
})

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

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

声明过滤器：

`private dateFilterPipe: DateFilterPipe`

应用过滤器：

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

4）.html

  <ngx-datatableclass="material fixedheader1"style="height:99%; text-align: center;"[rows]="rows"[columns]="columns"columnMode="'force'"[headerHeight]="50"[rowHeight]="50"[scrollbarH]="true"[scrollbarV]="true"></ngx-datatable>

//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);}}}
}

//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 }];

//后台返回的数据 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

ngx-datatable的使用相关推荐

datatable java实现分页_jQuery Datatable - 使用Php的服务器端处理数据分页
我有jquery datatable分页的问题(服务器端处理) . 例如,我在数据库中有 24 条记录 . 计数正确显示,总分页也正确显示 . 当我点击 Next or 2nd page 时,它会根据 ...
ashx导出dataTable为Excel
一,datatable导出Excel,用户可以选择路径,方法如下: /// <summary>/// DataTable导出到Excel/// </summary>/// &l ...
把ListT转换为DataTable
下面这个学习,把List<T>转换为Datatable. 下面先创建一个对象T: class Ay{private int _ID;public int ID{get { return _ ...
datatable和dataset的区别
DataSet 是离线的数据源 DataTable 是数据源中的表.当然也可以自己建一张虚表.插入数据库中 DataSet是DataTable的容器DataSet可以比作一个内存中的数据库,DataT ...
深入.NET DataTable
1.ADO.NET相关对象一句话介绍 1)DataAdapter: DataAdapter实际是一个SQL语句集合,因为对Database的操作最终需要归结到SQL语句. 2)Dataset: Dat ...
datatable自动增加序号
{"targets": [0],"visible": true,"render": function (data, type, full, ...
在DataTable中更新、删除数据
在DataTable中选择记录 /*在DataTable中选择记录*//* 向DataTable中插入记录如上,更新和删除如下:* ----但是在更新和删除前,首先要找出要更新和删除的记录.* 一种方 ...
dataTable 从服务器获取数据源的两种表现形式
1 var table = $('#example1').DataTable({ 2 "processing": true,//加载效果 3 "autoWidth&quo ...
DataTable的Compute功能详解
在为筛选器创建表达式时,用单引号将字符串括起来: "LastName = 'Jones'" 下面的字符是特殊字符,如下面所解释的,如果它们用于列名称中,就必须进行转义: \n (n ...
DataTable中数据记录的统计
DataTable中数据记录的统计我们在使用Sql Server这些数据库时,可以轻松的通过Sum.Aver.Count等统计出相关结果,那么,在已经把数据检索出来的DataSet(DataTabl ...

ngx-datatable的使用

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

ngx-datatable的使用相关推荐

最新文章

热门文章