关于javascript: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];
    }
}

github 地址