GridManager表格组件实现过滤功能 GridManager表格组件实现过滤功能

效果展示

在表头中增加过滤项是很多产品经理特别钟意的交互，据说是可以提升打野怪的效率。

文章图片

如何配置过滤功能在GridManager中被归类于列配置项，所以该功能需要操作关建配置项columnData中的filter。
columnData的使用

在使用 filter之前需要先对GridManager的核心配置项 columnData有一定的了解。

columnData用于定义表格列配置参数，为数组类型。每一个数组元素对应一个表格列，通过该参数对表格列进行配置。基础使用方式示例，点击可在线进行调试:

document.querySelector('#table-demo-baseCode').GM({ gridManagerName: 'demo-baseCode', ajaxData: 'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList', ajaxType: 'POST', columnData: [ { key: 'name', text: '名称' },{ key: 'info', text: '说明' },{ key: 'url', text: 'url' } ] });

filter的使用

当了解了 columnData的基础使用方式后，通过增加 filter即可简单的实现过滤功能。

配置项filter为Object类型，该对象的详细说明如下:

option: 筛选条件列表, 数组类型。格式: [{value: '1', text: 'HTML/CSS'}],在使用filter时该参数为必设项。
selected: 筛选选中项，字符串类型, 未存在选中项时设置为''。在此设置的选中的过滤条件将会覆盖query。
isMultiple: 否为多选, 布尔类型, 默认为false，非必设项。

基础配置示例，点击可在线进行调试:

{ filter: { // 筛选条件列表, 数组对象。格式: [{value: '1', text: 'HTML/CSS'}],在使用filter时该参数为必设项。 option: [ {value: '1', text: 'HTML/CSS'}, {value: '2', text: 'nodeJS'}, {value: '3', text: 'javaScript'}, {value: '4', text: '前端鸡汤'}, {value: '5', text: 'PM Coffee'}, {value: '6', text: '前端框架'}, {value: '7', text: '前端相关'} ], // 筛选选中项，字符串, 未存在选中项时设置为''。在此设置的选中的过滤条件将会覆盖query selected: '3', // 否为多选, 布尔值, 默认为false。非必设项 isMultiple: false }, template: function (type, row) { return TYPE_MAP[type]; } }

【GridManager表格组件实现过滤功能】github地址