談一談EasyUI中TreeGrid的過濾功能

寫在最前面

這個星期一直在糾結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的查詢功能，代碼如下，來源地址：http://www.cnblogs.com/mikel/archive/2011/11/16/2250812.html

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);
    }
}

效果圖

只是記錄下自己的思路，寫的有點亂還請見諒。轉載還請注明出處：http://www.cnblogs.com/laoyeye/p/7306974.html。