欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

EasyUI的TreeGrid的過濾功能的解決思路

 更新時間：2017年08月08日 16:01:47   作者：小賣鋪的老爺爺  
這篇文章主要介紹了EasyUI的TreeGrid的過濾功能的解決思路,需要的朋友可以參考下

寫在最前面

這個星期一直在糾結(jié)easyui的treegrid的過濾功能，原因呢，自然是項目中一個莫名奇妙的需求。

easyui雖說是后端程序員的前端框架，但是說句實話，除去api，讓我直接寫里面的節(jié)點信息的話，還真是無從下手，在這里先對前端的同學膜拜下。

說下需求吧，最近一個項目中有個界面使用的easyui的treegrid展示，起初是沒什么問題的，但是隨著數(shù)據(jù)的導入發(fā)現(xiàn)實際操作上十分不便。原因呢是開發(fā)的時候treegrid并沒有做分頁的處理，目前測試環(huán)境數(shù)據(jù)達到456條，想從中找到一條然后處理的話，只能說費時費力了。于是便產(chǎn)生了開發(fā)個過濾搜索功能的想法。

起初感覺還是簡單調(diào)用下api什么的，因為我記得datagrid就有個datagrid-filter.js官方擴展，但是查遍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的查詢功能，代碼如下，來源地址：http://www.dbjr.com.cn/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ù)的查詢時長就達到20s，查一次來20s查一次來20s，誰受得了，結(jié)果自然被領(lǐng)導無情的打回了。

 沿著這個思路繼續(xù)找，既然訪問數(shù)據(jù)庫可以實現(xiàn)，那我是不是在頁面初始化第一次的時候?qū)?shù)據(jù)存起來呢，所以我這次在loadFilter里就沒有做邏輯的驗證了，只是把data值取出來，然后將邏輯處理放在另外的函數(shù)里，功夫不負有心人，效果終究還是實現(xiàn)了，只是在初始化的時候查一次數(shù)據(jù)庫，其他的搜索就不在load數(shù)據(jù)庫了。下面貼出相關(guān)的代碼給大家參考，有更好的想法的同學還請給個思路哈，這個先拜謝了。

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);
  }
  },
  '-',
  {
//  擴展當前結(jié)點
  iconCls:'icon-redo',
  handler:function () {
   doTreeGridExpand(idTreeGrid);
  }
  },
  '-',
  {
//  收縮當前結(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的過濾功能的解決思路，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論