NG-ZORRO表格多列联动筛选

NG-Zorro官方文档中只介绍了纯文本搜索的联动筛选以及单列的自定义筛选，业务需求中要用到不同状态的联动搜索（在前一个筛选条件基础上进行筛选），包括文本值搜索、日期搜索、多选框搜索。这里做一个简单的记录，写得比较复杂，如果有简单的方法望告知。

一、定义表格

需要筛选的字段中添加<nz-filter-trigger>，设置visible变量

i标签为筛选器的图标，可自行定义

nzActive表示该筛选器处于激活状态（已筛选）的条件

（未激活）（激活）

nzDropdownMenu表示筛选菜单的模板，定义见二

<thead><tr><th>上级单位</th><th>单位<nz-filter-trigger [(nzVisible)]="table.filter.fields[0].visible" [nzActive]="table.filter.fields[0].searchValue.length > 0" [nzDropdownMenu]="menu1"><i nz-icon nzType="search"></i></nz-filter-trigger></th><th>帐号</th><th>业务名称<nz-filter-trigger [(nzVisible)]="table.filter.fields[1].visible" [nzActive]="table.filter.fields[1].searchValue.length > 0" [nzDropdownMenu]="menu2"><i nz-icon nzType="search"></i></nz-filter-trigger></th><th>办理时间<nz-filter-trigger [(nzVisible)]="table.filter.fields[2].visible" [nzActive]="table.filter.fields[2].searchValue"[nzDropdownMenu]="menu3"><i nz-icon nzType="search"></i></nz-filter-trigger></th><th>状态<nz-filter-trigger [(nzVisible)]="table.filter.fields[3].visible" [nzActive]="table.filter.fields[3].searchValue.toString() !==table.filter.doneCopy.toString() &&(table.filter.doneCopy[0] ||table.filter.doneCopy[1])" [nzDropdownMenu]="menu4"><i nz-icon nzType="search"></i></nz-filter-trigger></th><th>操作</th></tr>
</thead>

二、定义筛选菜单模板

筛选菜单可以完全自定义，本例中分别用了文本框、日期选择框、多选框。通过自定义搜索和重置函数完成功能，本例中复用了同一函数。

<!-- 单位筛选菜单 -->
<nz-dropdown-menu #menu1="nzDropdownMenu"><div class="ant-table-filter-dropdown"><div class="search-box"><input type="text" nz-input placeholder="输入关键字" [(ngModel)]="table.filter.fields[0].searchValue"/><button nz-button nzSize="small" nzType="primary" (click)="table.filter.search(0)"class="search-button">搜索</button><button nz-button nzSize="small" (click)="table.filter.reset(0)">重置</button></div></div>
</nz-dropdown-menu>
<!-- 业务名称筛选菜单 -->
<nz-dropdown-menu #menu2="nzDropdownMenu"><div class="ant-table-filter-dropdown"><div class="search-box"><input type="text" nz-input placeholder="输入关键字" [(ngModel)]="table.filter.fields[1].searchValue"/><button nz-button nzSize="small" nzType="primary" (click)="table.filter.search(1)"class="search-button">搜索</button><button nz-button nzSize="small" (click)="table.filter.reset(1)">重置</button></div></div>
</nz-dropdown-menu>
<!-- 时间筛选菜单 -->
<nz-dropdown-menu #menu3="nzDropdownMenu"><div class="ant-table-filter-dropdown"><div class="search-box"><nz-date-picker [(ngModel)]="table.filter.fields[2].searchValue"></nz-date-picker><button nz-button nzSize="small" nzType="primary" (click)="table.filter.search(2)"class="search-button">搜索</button><button nz-button nzSize="small" (click)="table.filter.reset(2)">重置</button></div></div>
</nz-dropdown-menu>
<!-- 状态筛选菜单 -->
<nz-dropdown-menu #menu4="nzDropdownMenu"><div class="ant-table-filter-dropdown"><div class="search-box"><div class="labels"><label nz-checkbox nzValue="1" [ngModel]="table.filter.fields[3].searchValue[0]"[disabled]="!table.completed" (ngModelChange)="table.filter.fields[3].changeFn(true, $event)">已完成</label><label nz-checkbox nzValue="2" [ngModel]="table.filter.fields[3].searchValue[1]"[disabled]="!table.undone" (ngModelChange)="table.filter.fields[3].changeFn(false, $event)">未完成</label></div><button nz-button nzSize="small" nzType="primary" (click)="table.filter.search(3)"class="search-button">搜索</button><button nz-button nzSize="small" (click)="table.filter.reset(3)">重置</button></div></div>
</nz-dropdown-menu>

三、定义相关值与函数

table.filter = {/*** doneCopy在本例中用于记录状态筛选器的初始值* 状态值与初始值不一样则标记状态筛选器为激活状态，且参与筛选*/doneCopy: [],filterData: [], // 筛选后数据// 筛选字段相关fields: [{visible: false, // 筛选菜单是否显示searchValue: '', // 筛选值field: 'orgName', // 字段名/*** 筛选对比函数* @param item 为每一条记录，用于筛选表格数据时进行比对*/searchFn: function(item) {// 常规函数的this，向上查找即为该字段对象本身return item[this.field].indexOf(this.searchValue) !== -1;},},{visible: false,searchValue: '',field: 'title',searchFn: function(item) {return item[this.field].indexOf(this.searchValue) !== -1;},},{visible: false,searchValue: null,field: 'startTime',searchFn: function(item) {// 日期使用toDateString()直接比较是否是同一天return (new Date(item[this.field]).toDateString() === this.searchValue.toDateString());},},{visible: false,searchValue: [],field: 'state',searchFn: function(item) {let flag;// 复选框均未选中则结果为空，定义flag为不存在的值if (! (this.searchValue[0] || this.searchValue[1])) flag = -1;// 有复选框选中则判断其值（超过两个复选框的情况需要另外判断）else flag = this.searchValue[0] ? 1 : 0;if (flag === 1 || flag === -1) return item[this.field] === flag;else return item[this.field] !== 1;},/*** 改变复选框状态值* @param flag 为HTML中传入，代表对应的复选框*/changeFn: function(flag, e) {if (flag) this.searchValue[0] = e;else this.searchValue[1] = e;},},],// 重置某一字段筛选条件reset: i = >{switch (i) {case 0:case 1:this.table.filter.fields[i].searchValue = '';break;case 2:this.table.filter.fields[i].searchValue = null;break;case 3:this.table.filter.fields[i].searchValue = [...this.table.filter.doneCopy];break;}this.table.filter.search(i);},// 筛选函数search: i = >{this.table.filter.fields[i].visible = false;this.table.filter.filterData = this.table.tableData.filter(item = >{// 对每一条记录循环执行各字段筛选函数，实现多字段联动筛选for (const field of this.table.filter.fields) {// 数组项（状态复选框），与初始选择状态条件不一致才执行if ((Array.isArray(field.searchValue) && field.searchValue.toString() !== this.table.filter.doneCopy.toString()) || (!Array.isArray(field.searchValue) && field.searchValue)) {if (!field.searchFn(item)) return false;}}// 任意一个存在的条件筛选不通过则return false结束当条记录的判断，均满足则return truereturn true;});},
}

NG-ZORRO表格多列联动筛选相关推荐

python按某列拆分excel表格_Python对Excel按列值筛选并拆分表格到多个文件的代码...
场景:集团中心下发本省数据时,并未按地市.业务拆分,现需要按地市.业务拆分并分发到地市. 本文利用Python的pandas包实现了以上场景. 注:本示例代码只实现按单列拆分,如果需要多列筛选拆分,请 ...
【Magicodes.IE 2.0.0-beta1版本发布】已支持数据表格、列筛选器和Sheet拆分
为了更好的完善Magicodes.IE,春节期间我们会进行一次大的重构.由于精力有限,急缺文档和翻译(将文档翻译为英文文档)支持,诚邀各位加入.同时在功能方便也做了相关规划,有兴趣的朋友可以参与提交P ...
Select2的使用联动筛选框的一个例子
本文使用的select2版本为select2 4.0.2 数据库中的表格信息如下,month字段包含了年.月信息.使用select2插件作为筛选框,以年度和月份信息筛选表格数据.年度和月份这两个筛 ...
cxGrid 在 GridMode = True 模式下实现标题点击排序以及标题列过滤筛选！！！
最近使用 cxGrid 这个表格控件,发现加载十几万笔数据时加载特别慢,同时用 DBGridEh 加载来对比,发现速度差异很大, 原来是 cxGrid 的 GridView 默认 GridMode=F ...
java多按钮筛选条件_Excel办公技巧：如何对表格数据进行自定义筛选？
这篇文章和大家分享对表格数据进行自定义筛选的两种方法. 应用场景下图表格中$A$2:$B$10单元格为筛选数据区域,我们想在其中筛选出姓"春"或者姓"夏"同时 ...
pandas 根据筛选条件对指定excel列进行筛选
pandas 根据筛选条件对指定excel列进行筛选导入需要筛选的excel和筛选条件要筛选的表格A 思路结果这两天老师要求筛选一下最近几年学院发表的文章,从图书馆那要了份数据量较大的exce ...
几张表格怎么联动_在excel 中，怎样实现数据关联？：excel怎么把几个表格的数据联动...
在excel 中,怎样实现数据关联? Excel数据关联可以利用公式来. 软件版本:Office2007 举例说明如下: 1.Sheet1如下数据,设置Sheet2中对元格数据与之关联起来: 2.在S ...
两列模糊对比 oracle,excel 模糊比对两列数据并将比对结果显示出来 | excel表格两列数据模糊对比...
excel2016如何将两列完全不一样的数据进行模糊对比? B2单元格输入公式=IF(ISNUMBER(FIND(LEFT(A2,3),PHONETIC(G$2:G$8))),"" ...
NG ZORRO知识点总结
NG ZORRO的常用属性,包括但不限于,结合代码 <button nz-button [nzType]="'primary'" [nzSize]="'large' ...

NG-ZORRO表格多列联动筛选

一、定义表格

二、定义筛选菜单模板

三、定义相关值与函数

NG-ZORRO表格多列联动筛选相关推荐

最新文章

热门文章