与排序功能的加入流程类似，我们把过滤功能单独封装成一个组件，该组件提供一个过滤接口，同时侦听一个过滤消息。一旦接收到消息，则记录下过滤关键字，并派发一个表体刷新命令。
Filter: { fun: function (sys, items, opts) { var filterKey = ""; this.watch("filter", function (e, key) { filterKey = key.toLowerCase(); this.trigger("update"); }); return function (data) { return data.filter(function (row) { return Object.keys(row).some(function (key) { return String(row[key]).toLowerCase().indexOf(filterKey) > -1; }); }); }; } }
另外需要对组件 DataGrid 作一些修正，修正内容与上述的排序功能的加入类似，区别在于额外完善了 filter 接口以及对消息作用域进行了限制。下面是我们最终的网格组件。
DataGrid: { css: `#table { border: 2px solid #42b983; border-radius: 3px; background-color: #fff; } #table th { background-color: #42b983; color: rgba(255,255,255,0.66); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #table td { background-color: #f9f9f9; } #table th, #table td { min-width: 120px; padding: 10px 20px; }`, xml: `<table> <Thead/> <Tbody/> <Sort/> <Filter/> </table>`, map: { msgscope: true }, fun: function (sys, items, opts) { var data = {gridColumns: [], gridData: []}; function setValue(value) { data = value; items.thead.val(data.gridColumns); items.tbody.val(data.gridColumns, data.gridData); } function filter(filterKey) { sys.table.notify("filter", filterKey); } this.on("update", function() { items.tbody.val(items.filter(items.sort(data.gridData))); }); return { val: setValue, filter: filter }; } }
值得注意的是这里一定要在映射项中配置限制消息作用域的选项。否则，当在一个应用中实例化多个网格组件时，消息就会互相干扰。
测试
最后我们来测试下我们完成的组件，测试的功能主要就是刚开始提到的三个：数据展示、排序以及过滤。
Index: { css: "#index { font-family: Helvetica Neue, Arial, sans-serif; font-size: 14px; color: #444; }\ #search { margin: 8px 0; }", xml: "<div>\ Search <input/>\ <Table/>\ </div>", fun: function (sys, items, opts) { items.table.val(data); sys.search.on("input", e => items.table.filter(sys.search.prop("value"))); } }
本系列文章基于 xmlplus 框架。如果你对 xmlplus 没有多少了解，可以访问 。这里有详尽的入门文档可供参考。