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的查询功能，代码如下，来源地址：https://www./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的过滤功能的解决思路，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# easyui  # treegrid  # 过滤的功能  # easyUI使用分页过滤器对数据进行分页操作实例分析  # easyui combogrid实现本地模糊搜索过滤多列  # jquery easyui combobox模糊过滤(示例代码)  # jEasyUI 过滤下拉数据网格的实现示例  # 加载  # 有个  # 查询功能  # 实现了  # 给大家  # 小编  # 后端  # 有什么  # 我也  # 让我  # 在这里  # 很好  # 我在  # 放在  # 看了  # 不出  # 在此  # 功夫不负有心人  # 网上  # 其他的 

相关文章： 如何在建站之星绑定自定义域名？  已有域名如何快速搭建专属网站？  seo网站制作优化,网站SEO优化步骤有哪些？  ,柠檬视频怎样兑换vip？  专业网站制作服务公司,有哪些网站可以免费发布招聘信息？  韩国网站服务器搭建指南：VPS选购、域名解析与DNS配置推荐  如何自己制作一个网站链接,如何制作一个企业网站，建设网站的基本步骤有哪些？  盘锦网站制作公司,盘锦大洼有多少5G网站？  C#如何序列化对象为XML XmlSerializer用法  建站VPS配置与SEO优化指南：关键词排名提升策略  在线流程图制作网站手机版,谁能推荐几个好的CG原画资源网站么？  官网建站费用明细查询_企业建站套餐价格及收费标准指南  如何用IIS7快速搭建并优化网站站点？  高防服务器租用首荐平台，企业级优惠套餐快速部署  如何在服务器上三步完成建站并提升流量？  定制建站价位费用解析与套餐推荐全攻略  再谈Python中的字符串与字符编码（推荐）  美食网站链接制作教程视频,哪个教做美食的网站比较专业点？  如何用AWS免费套餐快速搭建高效网站？  长春网站建设制作公司,长春的网络公司怎么样主要是能做网站的？  如何通过西部数码建站助手快速创建专业网站？  官网网站制作腾讯审核要多久,联想路由器newifi官网  网站制作话术技巧,网站推广做的好怎么话术？  制作证书网站有哪些,全国城建培训中心证书查询官网？  如何在服务器上配置二级域名建站？  Python lxml的etree和ElementTree有什么区别  网站设计制作公司地址,网站建设比较好的公司都有哪些？  活动邀请函制作网站有哪些,活动邀请函文案？  深圳企业网站制作设计,在深圳如何网上全流程注册公司？  网站微信制作软件,如何制作微信链接？  专业制作网站的公司哪家好,建立一个公司网站的费用.有哪些部分,分别要多少钱？  建站主机解析：虚拟主机配置与服务器选择指南  杭州银行网站设计制作流程,杭州银行怎么开通认证方式？  教程网站设计制作软件,怎么创建自己的一个网站？  唐山网站制作公司有哪些,唐山找工作哪个网站最靠谱？  制作网站的软件免费下载,免费制作app哪个平台好？  如何在阿里云购买域名并搭建网站？  测试制作网站有哪些,测试性取向的权威测试或者网站？  如何用西部建站助手快速创建专业网站？  高性能网站服务器配置指南：安全稳定与高效建站核心方案  建站主机SSH密钥生成步骤及常见问题解答？  建站之星官网登录失败？如何快速解决？  整人网站在线制作软件,整蛊网站退不出去必须要打我是白痴才能出去？  历史网站制作软件,华为如何找回被删除的网站？  ,sp开头的版面叫什么？  制作网站的网址是什么,请问后缀为.com和.com.cn还有.cn的这三种网站是分别是什么类型的网站？  如何在Golang中处理模块冲突_解决依赖版本不兼容问题  定制建站是什么？如何实现个性化需求？  网站专业制作公司有哪些,做一个公司网站要多少钱？  如何在万网自助建站平台快速创建网站？