DIV CSS 佈局教程網

寫在最前面

這個星期一直在糾結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.jb51.net/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的過濾功能的解決思路，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！