寫在最前面
這個星期一直在糾結easyui的treegrid的過濾功能，原因呢，自然是項目中一個莫名奇妙的需求。
easyui雖說是后端程序員的前端框架，但是說句實話，除去api，讓我直接寫里面的節點信息的話，還真是無從下手，在這里先對前端的同學膜拜下。
說下需求吧，最近一個項目中有個界面使用的easyui的treegrid展示，起初是沒什么問題的，但是隨著數據的導入發現實際操作上十分不便。原因呢是開發的時候treegrid并沒有做分頁的處理，目前測試環境數據達到456條，想從中找到一條然后處理的話，只能說費時費力了。于是便產生了開發個過濾搜索功能的想法。
起初感覺還是簡單調用下api什么的，因為我記得datagrid就有個datagrid-filter.js官方擴展，但是查遍api手冊，還是沒有發現treegrid有什么現成的方法。只找到了兩個屬性，loader和loadFilter，好像有點什么關系。
期間我也看了下網上的解決方法，不知道是不是太簡單了，網上關于TreeGrid過濾的資源很少。博問里也都被大牛無視了。
解決思路
這里列舉一個在園子里看到的文章，其他也沒有找到類似相關的內容了
可以查詢根節點和具體子節點的信息，開始使用EasyUI的TreeGrid的loadData 加載url的方式不能實現查詢功能，于是利用異步AJAX查詢了一下數據返回后，賦值給變量，然后利用TreeGrid的loadData加載這個json格式的返回結果實現了對TreeGrid的查詢功能，代碼如下，來源地址：//m.survivalescaperooms.com/article/120646.htm
function searchROM() { var product = $('#Product').combobox('getValue'); var keytype = $('#keytype').combobox('getValue'); var keywords = $('#keywords').val(); var url = encodeURI('/GoodsROM/ROMList?product=' + product + '&keytype=' + keytype + '&keywords=' + keywords+'&'+Math.random()); $.post(url, {}, function(data) { var d = data;//返回json格式結果 $('#grid').treegrid('loadData',d);//加載數據更新treegrid }, 'json'); }想法是很好的，但是奈何，我們后端的代碼是封裝在General里的，改后臺代碼影響很多，于是還是想到api，試試剛開始的loader和loadFilter吧。
loadFilter:function(data){ var newData = new Array(); var filter = $("#filter").val(); for(var i=0; i<data.length; i++){ if(data[i].nodeName.indexOf(filter)>0){ // 定義一個數組 newData.push(data[i]); } } if(newData.length==0){ return data; }else{ return newData; } },我在查詢出的結果上做過濾，返回處理后的結果，通過load方法重新加載。
效果不出所望，查詢功能是實現了，但是因為每次查詢都需要load一次數據庫，本來頁面初始化時數據的查詢時長就達到20s，查一次來20s查一次來20s，誰受得了，結果自然被領導無情的打回了。
沿著這個思路繼續找，既然訪問數據庫可以實現，那我是不是在頁面初始化第一次的時候將數據存起來呢，所以我這次在loadFilter里就沒有做邏輯的驗證了，只是把data值取出來，然后將邏輯處理放在另外的函數里，功夫不負有心人，效果終究還是實現了，只是在初始化的時候查一次數據庫，其他的搜索就不在load數據庫了。下面貼出相關的代碼給大家參考，有更好的想法的同學還請給個思路哈，這個先拜謝了。
var allData = new Array();function doOrgChartInit(idTreeGrid, idMenu, idUriQuery) { var bFound = true; $('#' + idTreeGrid).treegrid({ rownumbers:true, animate:true, collapsible:true, fitColumns:true, url:idUriQuery, idField:'nodeId', treeField:'nodeName', loadFilter:function(data){ if (bFound&&data[0].nodeName!="Root") { allData = data; bFound = false; } return data; }, columns:[ [ {halign:'center', align:'left',field:'nodeName', title:'名稱', width:200}, {halign:'center', align:'left',field:'description', title:'描述', width:100, align:'center'} ] ], // ----------------------------------------------------------------------------------- 工具欄 toolbar:[ {// 刷新 iconCls:'icon-reload', handler:function () { doTreeGridRefresh(idTreeGrid); } }, '-', {// 擴展當前結點 iconCls:'icon-redo', handler:function () { doTreeGridExpand(idTreeGrid); } }, '-', {// 收縮當前結點 iconCls:'icon-undo', handler:function () { doTreeGridCollapse(idTreeGrid); } }, '-', {// 搜索框 text: '<input id="filter" type="text" />', }, {// 搜索 iconCls:'icon-search', handler:function () { doFilter(idTreeGrid); } } ], // ----------------------------------------------------------------------------------- 彈出菜單 onContextMenu:function (e, row) { e.preventDefault(); $(this).treegrid('select', row.nodeId);// alert(row.orgChartPk); vOrgChartPk = row.orgChartPk; $('#' + idMenu).menu('show', { left:e.pageX, top:e.pageY }); } });}function doFilter(idTreeGrid) { var newData = new Array(); var filter = $("#filter").val(); if (allData.length==0) { alert("請先點擊Root初始化界面"); return false; } for(var i=0; i<allData.length; i++){ if(allData[i].nodeName.indexOf(filter)>0){ // 定義一個數組 newData.push(allData[i]); } } if (filter=="") { $('#' + idTreeGrid).treegrid('loadData',allData); }else{ $('#' + idTreeGrid).treegrid('loadData',newData); }}總結
以上所述是小編給大家介紹的EasyUI的TreeGrid的過濾功能的解決思路，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
