欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-11-25 09:59:59
写在最前面 这个星期一直在纠结easyui的treegrid的过滤功能,原因呢,自然是项目中一个莫名奇妙的需求。 easyui虽说是后端程序员的前端框架,但是说句实话,...

写在最前面

这个星期一直在纠结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的查询功能,代码如下,来源地址:

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的过滤功能的解决思路,希望对大家有所帮助