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 相关文章推荐
jQuery 入门级学习笔记及源码
Jan 22 Javascript
图片onload事件触发问题解决方法
Jul 31 Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
vue mvvm数据响应实现
Nov 11 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
php获取文章上一页与下一页的方法
2014/12/01 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
Python实现线程池代码分享
2015/06/21 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
实习鉴定范文
2013/12/19 职场文书
培训班主持词
2014/03/28 职场文书
岳庙导游词
2015/02/04 职场文书
孔繁森观后感
2015/06/10 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
python tkinter实现定时关机
2021/04/21 Python