寫在最前面
這個星期一直在糾結(jié)easyui的treegrid的過濾功能,原因呢,自然是項目中一個莫名奇妙的需求。
easyui雖說是后端程序員的前端框架,但是說句實話,除去api,讓我直接寫里面的節(jié)點信息的話,還真是無從下手,在這里先對前端的同學(xué)膜拜下。
說下需求吧,最近一個項目中有個界面使用的easyui的treegrid展示,起初是沒什么問題的,但是隨著數(shù)據(jù)的導(dǎo)入發(fā)現(xiàn)實際操作上十分不便。原因呢是開發(fā)的時候treegrid并沒有做分頁的處理,目前測試環(huán)境數(shù)據(jù)達(dá)到456條,想從中找到一條然后處理的話,只能說費時費力了。于是便產(chǎn)生了開發(fā)個過濾搜索功能的想法。
起初感覺還是簡單調(diào)用下api什么的,因為我記得datagrid就有個datagrid-filter.js官方擴(kuò)展,但是查遍api手冊,還是沒有發(fā)現(xiàn)treegrid有什么現(xiàn)成的方法。只找到了兩個屬性,loader和loadFilter,好像有點什么關(guān)系。
期間我也看了下網(wǎng)上的解決方法,不知道是不是太簡單了,網(wǎng)上關(guān)于TreeGrid過濾的資源很少。博問里也都被大牛無視了。
解決思路
這里列舉一個在園子里看到的文章,其他也沒有找到類似相關(guān)的內(nèi)容了
可以查詢根節(jié)點和具體子節(jié)點的信息,開始使用EasyUI的TreeGrid的loadData 加載url的方式不能實現(xiàn)查詢功能,于是利用異步AJAX查詢了一下數(shù)據(jù)返回后,賦值給變量,然后利用TreeGrid的loadData加載這個json格式的返回結(jié)果實現(xiàn)了對TreeGrid的查詢功能,代碼如下,來源地址://www.gxlcms.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格式結(jié)果 $('#grid').treegrid('loadData',d);//加載數(shù)據(jù)更新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){ // 定義一個數(shù)組 newData.push(data[i]); } } if(newData.length==0){ return data; }else{ return newData; } },
我在查詢出的結(jié)果上做過濾,返回處理后的結(jié)果,通過load方法重新加載。
效果不出所望,查詢功能是實現(xiàn)了,但是因為每次查詢都需要load一次數(shù)據(jù)庫,本來頁面初始化時數(shù)據(jù)的查詢時長就達(dá)到20s,查一次來20s查一次來20s,誰受得了,結(jié)果自然被領(lǐng)導(dǎo)無情的打回了。
沿著這個思路繼續(xù)找,既然訪問數(shù)據(jù)庫可以實現(xiàn),那我是不是在頁面初始化第一次的時候?qū)?shù)據(jù)存起來呢,所以我這次在loadFilter里就沒有做邏輯的驗證了,只是把data值取出來,然后將邏輯處理放在另外的函數(shù)里,功夫不負(fù)有心人,效果終究還是實現(xiàn)了,只是在初始化的時候查一次數(shù)據(jù)庫,其他的搜索就不在load數(shù)據(jù)庫了。下面貼出相關(guān)的代碼給大家參考,有更好的想法的同學(xué)還請給個思路哈,這個先拜謝了。
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); } }, '-', { // 擴(kuò)展當(dāng)前結(jié)點 iconCls:'icon-redo', handler:function () { doTreeGridExpand(idTreeGrid); } }, '-', { // 收縮當(dāng)前結(jié)點 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){ // 定義一個數(shù)組 newData.push(allData[i]); } } if (filter=="") { $('#' + idTreeGrid).treegrid('loadData',allData); }else{ $('#' + idTreeGrid).treegrid('loadData',newData); } }
總結(jié)
以上所述是小編給大家介紹的EasyUI的TreeGrid的過濾功能的解決思路,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com