easyui树形结构搜索功能

最新推荐文章于 2024-08-10 11:12:46 发布

转载最新推荐文章于 2024-08-10 11:12:46 发布 · 873 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2440810/blog/1591530

文章标签：

#javascript #json #ViewUI

本文介绍了如何在EasyUI的树形结构中添加搜索功能。通过将JSON数据加载到前台并定义搜索事件，实现了对叶子节点的模糊搜索。在搜索框中设置onkeyup事件，并提供了相应的搜索事件代码示例。

目前我用到的easyui的功能点，基本是tree，排版。下面我总结一下我遇到的问题和解决的方案。

1.树形结构加上搜索。

我百度了很久发现没有关于树形结构的搜索，也可能是我木有看见。自己定义搜索也很简单。只需要将你的json数据load到前台，然后在前台进行搜索。

easyui绑定数据的方式第一种可以通过url直接来获取，如：

$('#tree_id').tree({
      checkbox: false,
      url: '/autosql/sel_all_dim_and_index/?search_val='+search_val, 
      
    });

也可以根据data的形式传输，如在你进入页面是直接将json数据带过来，

$('#tree_id').tree({
      checkbox: false,
      
      data:all_list,
    });

all_list就是你要传输的数据，然后拿到了json数据就可以直接在前台进行模糊搜索。

定义一个搜索框，给他一个onkeyup事件。

下面是我写的搜索事件

function search_tree(){
   var all_list = [];
   var tn = [];
   var search_val = $("#search_value").val();
   group = tree_lists[0].children;
   for(t in group){
      var childrens = [];
      var chile = group[t].children;
      for(c in chile){
         chile_text = chile[c].text;
         if(chile_text.indexOf(search_val) > -1){
            childrens.push({'id':chile[c].id,'text':chile[c].text});
         }
      }
      if(childrens.length){
         tn.push({'id':group[t].id,'text':group[t].text,'children':childrens});
      }
   }
   all_list.push({'id':1,'text':'主题',children:tn});
   $('#tree_id').tree({
      checkbox: false,
      //url: '/autosql/sel_all_dim_and_index/?search_val='+search_val, 
      data:all_list,
    }); 
}

目前我只针对于叶子节点进行了搜索。

2.怎样判断叶子节点；

$('#tree_id').tree({
      onClick: function (node) {
          //判断是否是叶子节点
          if($('#tree_id').tree('isLeaf',node.target)){
              var node_id = node.id;
              var node_name = node.text;
              var tree_parent = $('#tree_id').tree('getParent', node.target);  
              var parent_name = tree_parent.text;
              var parent_id = tree_parent.id;

              var pp = $("#tree_id").tree('getParent',tree_parent.target);
              alert(pp.text)
          }
      }
  });

转载于:https://my.oschina.net/u/2440810/blog/1591530