成果展现
在表头中减少过滤项是很多产品经理特地钟意的交互,据说是能够晋升打野怪的效率。
如何配置
过滤性能在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]; }}
github地址