搜索功能在GridManager中的实现方式很简单。
首先需要确认当前的GridManager已经渲染成功, 如何渲染请 点击这里。
获取被实例化的 table标签
var tableDOM = document.querySelector('table');
当GridManager 渲染成功后, 会在原 table 标签的原型上增加 GM 方法; 通过该方法可以做很多事情, 比方说搜索。
这里说明一下,为了不过多的侵占 Element.prototype 的属性, 并未将所有的方法都添加至 table 的原型上。 而是采用首参数为方法名的方式。
比如说 tableDOM.GM('init'), 就是调用了 init 方法。
通过GM 调用 setQuery 方法, 进行搜索
// 假设触发搜索后,获取到的搜索条件为 query
var query = {'userName':'baukh','sex':'男'};
tableDOM.GM('setQuery', query);
setQuery 方法介绍
更改在生成组件时所配置的参数 query,执行后将会自动刷新表格数据。
需要注意的是:
query 的 key 值如果与分页及排序等字段冲突, query 中的值将会被忽略.
setQuery() 会立即触发刷新操作
在此配置的 query 在分页事件触发时, 会以参数形式传递至 pagingAfter(query) 事件内
setQuery 对 query 字段执行的操作是修改而不是合并, 每次执行 setQuery 都会将之前配置的 query 值覆盖
query中的字段如果与分页字段相冲突,将失效。
参数说明
query:
需要更改的 query 信息,为 json 类型。格式=> {'userName':'baukh','sex':'男'}
isGotoFirstPage:
是否返回第一页, Boolean 类型。默认值 true;
callback:
回调函数