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

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

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

寫在最前面

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

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

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

起初感覺還是簡(jiǎn)單調(diào)用下api什么的，因?yàn)槲矣浀胐atagrid就有個(gè)datagrid-filter.js官方擴(kuò)展，但是查遍api手冊(cè)，還是沒有發(fā)現(xiàn)treegrid有什么現(xiàn)成的方法。只找到了兩個(gè)屬性，loader和loadFilter，好像有點(diǎn)什么關(guān)系。

期間我也看了下網(wǎng)上的解決方法，不知道是不是太簡(jiǎn)單了，網(wǎng)上關(guān)于TreeGrid過濾的資源很少。博問里也都被大牛無視了。

解決思路

這里列舉一個(gè)在園子里看到的文章，其他也沒有找到類似相關(guān)的內(nèi)容了

可以查詢根節(jié)點(diǎn)和具體子節(jié)點(diǎn)的信息，開始使用EasyUI的TreeGrid的loadData 加載url的方式不能實(shí)現(xiàn)查詢功能，于是利用異步AJAX查詢了一下數(shù)據(jù)返回后，賦值給變量，然后利用TreeGrid的loadData加載這個(gè)json格式的返回結(jié)果實(shí)現(xiàn)了對(duì)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里的，改后臺(tái)代碼影響很多，于是還是想到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){ 
   // 定義一個(gè)數(shù)組 
   newData.push(data[i]); 
  }
  }
  if(newData.length==0){
  return data; 
  }else{
  return newData; 
  }
 },

我在查詢出的結(jié)果上做過濾，返回處理后的結(jié)果，通過load方法重新加載。

效果不出所望，查詢功能是實(shí)現(xiàn)了，但是因?yàn)槊看尾樵兌夹枰猯oad一次數(shù)據(jù)庫，本來頁面初始化時(shí)數(shù)據(jù)的查詢時(shí)長(zhǎng)就達(dá)到20s，查一次來20s查一次來20s，誰受得了，結(jié)果自然被領(lǐng)導(dǎo)無情的打回了。

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

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é)點(diǎn)
  iconCls:'icon-redo',
  handler:function () {
   doTreeGridExpand(idTreeGrid);
  }
  },
  '-',
  {
//  收縮當(dāng)前結(jié)點(diǎn)
  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("請(qǐng)先點(diǎn)擊Root初始化界面");
 return false;
 }
 for(var i=0; i<allData.length; i++){ 
 if(allData[i].nodeName.indexOf(filter)>0){ 
  // 定義一個(gè)數(shù)組 
  newData.push(allData[i]); 
 }
 }
 if (filter=="") {
 $('#' + idTreeGrid).treegrid('loadData',allData);
 }else{
 $('#' + idTreeGrid).treegrid('loadData',newData);
 }
}

總結(jié)

以上所述是小編給大家介紹的EasyUI的TreeGrid的過濾功能的解決思路，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論