搜索功能在GridManager中的實(shí)現(xiàn)方式很簡(jiǎn)單。
首先需要確認(rèn)當(dāng)前的GridManager已經(jīng)渲染成功, 如何渲染請(qǐng) 點(diǎn)擊這里。
獲取被實(shí)例化的 table標(biāo)簽
var tableDOM = document.querySelector('table');
當(dāng)GridManager 渲染成功后, 會(huì)在原 table 標(biāo)簽的原型上增加 GM 方法; 通過(guò)該方法可以做很多事情, 比方說(shuō)搜索。
這里說(shuō)明一下,為了不過(guò)多的侵占 Element.prototype 的屬性, 并未將所有的方法都添加至 table 的原型上。 而是采用首參數(shù)為方法名的方式。
比如說(shuō) tableDOM.GM('init'), 就是調(diào)用了 init 方法。
通過(guò)GM 調(diào)用 setQuery 方法, 進(jìn)行搜索
// 假設(shè)觸發(fā)搜索后,獲取到的搜索條件為 query
var query = {'userName':'baukh','sex':'男'};
tableDOM.GM('setQuery', query);
setQuery 方法介紹
更改在生成組件時(shí)所配置的參數(shù) query,執(zhí)行后將會(huì)自動(dòng)刷新表格數(shù)據(jù)。
需要注意的是:
query 的 key 值如果與分頁(yè)及排序等字段沖突, query 中的值將會(huì)被忽略.
setQuery() 會(huì)立即觸發(fā)刷新操作
在此配置的 query 在分頁(yè)事件觸發(fā)時(shí), 會(huì)以參數(shù)形式傳遞至 pagingAfter(query) 事件內(nèi)
setQuery 對(duì) query 字段執(zhí)行的操作是修改而不是合并, 每次執(zhí)行 setQuery 都會(huì)將之前配置的 query 值覆蓋
query中的字段如果與分頁(yè)字段相沖突,將失效。
參數(shù)說(shuō)明
query:
需要更改的 query 信息,為 json 類型。格式=> {'userName':'baukh','sex':'男'}
isGotoFirstPage:
是否返回第一頁(yè), Boolean 類型。默認(rèn)值 true;
callback:
回調(diào)函數(shù)