关于easyui tree控件树节点的搜索实现

来源：互联网发布：中世纪2全面战争原版优化9 编辑：程序博客网时间：2024/05/16 17:49

easyui tree树我们开发人员一般都不会陌生，很多时候我们会有这么一个需求，让子树层级比较多的时候，我们要寻找我们需要的子树就变得有些麻烦，所以我们可以做一个树的搜索功能，废话不多说，我们立刻上代码：

</pre><pre name="code" class="html"><div id="div_left" data-options="region:'east'" style="width: 200px;"><div class="easyui-panel" data-options="border:false,fit:true" style="margin: 6px;"><input class="easyui-searchbox" data-options="searcher:searchDept,prompt:'搜索部门'" id="searchText" style="width: 186px; height: 32px;"></input><ul id="ul_tree_dept" class="easyui-tree"  style="width: 186px;"></ul></div></div>

使用js获得json结构的树对象，然后载入：

//机构树初始化$("#ul_tree_dept").tree({        url: '../common/depttree.html',        method: "post",        animate: false,        onClick: function (node) { }          });

这里我们是使用的easyui自带的eayui-searchbox，在代码中我们使定义了一个方法：searcheDept,下面是方法的具体实现：

//树查询function searchDept(){ var parentNode=$('#ul_tree_dept').tree('getRoots'); //得到tree顶级node var searchCon = $("#searchText").val(); /* alert("parentNode="+parentNode); alert("searchCon="+searchCon); */ var children;      for(var i=0;i<parentNode.length;i++){ //循环顶级 node          children = $('#ul_tree_dept').tree('getChildren',parentNode[i].target);//获取顶级node下所有子节点          if(children){ //如果有子节点              for(var j=0;j<children.length;j++){ //循环所有子节点                  //if($('#ul_tree_dept').tree('isLeaf',children[j].target)){ //判断子级是否为叶子节点,即不是父节点                      if(children[j].text.indexOf(searchCon)>=0||children[j].id.indexOf(searchCon)>=0){ //判断节点text是否包含搜索文本                                              selectNode(children[j]); //设置此节点为选择状态                          expandParent(children[j]); //设置此节点所有父级展开                          return;                     }                  //}              }          }else{              if(parentNode[i].text.indexOf(searchCon)||children[j].id.indexOf(searchCon)>=0>=0){                  selectNode(parentNode[i]);                  expandParent(parentNode[i]);                  return;              }          }      }  }function selectNode(node){     $('#ul_tree_dept').tree('select',node.target);            }; function expandParent(node){     var parent = node;     var t = true;     do {     parent = $('#ul_tree_dept').tree('getParent',parent.target); //获取此节点父节点     if(parent){ //如果存在         t=true;         $('#ul_tree_dept').tree('expand',parent.target);     }else{         t=false;     }     }while (t);            };

以上就是全部代码了，自认为还是挺详细的，如果有疑问，欢迎留言交流哦

1 0