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 相关文章推荐
js 解决“options为空或不是对象”
Dec 22 Javascript
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 Javascript
javascript题目,重写函数让其无限相加
Feb 15 Javascript
Js四则运算函数代码
Jul 21 Javascript
javascript获取选中的文本的方法代码
Oct 30 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
JavaScript中的方法调用详细介绍
Dec 30 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 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
drupal 代码实现URL重写
2011/05/04 PHP
深入php多态的实现详解
2013/06/09 PHP
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
js实现移动端轮播图
2020/12/21 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
Python 常用string函数详解
2016/05/30 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
python 字符串和整数的转换方法
2018/06/25 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
简单了解python关系(比较)运算符
2019/07/08 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
科室工作的个人自我评价
2013/10/30 职场文书
机电工程学生自荐信范文
2013/12/07 职场文书
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
党员公开承诺事项
2014/03/25 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
致接力运动员加油稿
2015/07/21 职场文书
市级三好生竞选稿
2015/11/21 职场文书