GridManager 实现搜索

GridManager搜索, 表格,gridmanager

拭目以待 发布于

搜索功能在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,执行后将会自动刷新表格数据。

需要注意的是: 

1. querykey 值如果与分页及排序等字段冲突, query 中的值将会被忽略.

2. setQuery() 会立即触发刷新操作

3. 在此配置的 query 在分页事件触发时, 会以参数形式传递至 pagingAfter(query) 事件内

4. setQueryquery 字段执行的操作是修改而不是合并, 每次执行 setQuery 都会将之前配置的 query 值覆盖

5. query中的字段如果与分页字段相冲突,将失效。


参数说明

query: 

需要更改的 query 信息,为 json 类型。格式=> {'userName':'baukh','sex':'男'}

isGotoFirstPage: 

是否返回第一页, Boolean 类型。默认值 true

callback: 

回调函数