EasyUI的TreeGrid的过滤功能的解决思路


Posted in Javascript onAugust 08, 2017

写在最前面

这个星期一直在纠结easyui的treegrid的过滤功能,原因呢,自然是项目中一个莫名奇妙的需求。

easyui虽说是后端程序员的前端框架,但是说句实话,除去api,让我直接写里面的节点信息的话,还真是无从下手,在这里先对前端的同学膜拜下。

说下需求吧,最近一个项目中有个界面使用的easyui的treegrid展示,起初是没什么问题的,但是随着数据的导入发现实际操作上十分不便。原因呢是开发的时候treegrid并没有做分页的处理,目前测试环境数据达到456条,想从中找到一条然后处理的话,只能说费时费力了。于是便产生了开发个过滤搜索功能的想法。

起初感觉还是简单调用下api什么的,因为我记得datagrid就有个datagrid-filter.js官方扩展,但是查遍api手册,还是没有发现treegrid有什么现成的方法。只找到了两个属性,loader和loadFilter,好像有点什么关系。

期间我也看了下网上的解决方法,不知道是不是太简单了,网上关于TreeGrid过滤的资源很少。博问里也都被大牛无视了。

EasyUI的TreeGrid的过滤功能的解决思路

解决思路

这里列举一个在园子里看到的文章,其他也没有找到类似相关的内容了

可以查询根节点和具体子节点的信息,开始使用EasyUI的TreeGrid的loadData 加载url的方式不能实现查询功能,于是利用异步AJAX查询了一下数据返回后,赋值给变量,然后利用TreeGrid的loadData加载这个json格式的返回结果实现了对TreeGrid的查询功能,代码如下,来源地址:https://3water.com/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的过滤功能的解决思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
理解 JavaScript 预解析
Oct 25 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
JavaScript实现无穷滚动加载数据
May 06 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
js中apply与call简单用法详解
Nov 06 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 #Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 #Javascript
原生JS+Canvas实现五子棋游戏
May 28 #Javascript
React-router v4 路由配置方法小结
Aug 08 #Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 #Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 #Javascript
VUE实现表单元素双向绑定(总结)
Aug 08 #Javascript
You might like
ThinkPHP空模块和空操作详解
2014/06/30 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
浅谈js中的闭包
2015/03/16 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
python sys模块sys.path使用方法示例
2013/12/04 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
python异常处理try except过程解析
2020/02/03 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
四风问题自查报告剖析材料
2014/02/08 职场文书
厨师长岗位职责
2014/03/02 职场文书
心理咨询承诺书
2014/05/20 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
nginx请求限制配置方法
2021/07/09 Servers
使用Java去实现超市会员管理系统
2022/03/18 Java/Android