jquery ztree实现模糊搜索功能_jquery

本文分享了jquery ztree实现模糊搜索功能两个实例，供大家参考，具体内容如下

ztree官方demo代码里的:
根据参数查找节点
以上文件修改成如下代码

  
根据参数查找节点
[ 文件路径: core/searchNodes.html ]

  

    


  

    


1、getNodeByParam / getNodesByParam / getNodesByParamFuzzy 方法操作说明
        

使用 zTreeObj.getNodeByParam / getNodesByParam / getNodesByParamFuzzy / getNodeByTId 方法，详细请参见 API 文档中的相关内容
        

搜索试试看：

            属性值( value )：

            属性( key )：name (string)
level (number) ... 根节点 level = 0
id (number)

            方法：getNodeByParam
getNodesByParam
getNodesByParamFuzzy (only string)
getNodesByFilter (参考本页源码中 function filter)

        
        

      

2、setting 配置信息说明
        

不需要对 setting 进行特殊设置
        

      

3、treeNode 节点数据说明
        

请注意各个方法使用时保证传入查找的参数类型与设定要查找的属性的类型一致
        

    

这样就简单的实现了模糊搜索显示的功能了。

第二个Ztree树结构模糊搜索实现方法，具体内容如下

function expand_ztree(treeId){
    var treeObj = $.fn.zTree.getZTreeObj(treeId);
    treeObj.expandAll(true);
  }
   
  
  function close_ztree(treeId){
    var treeObj = $.fn.zTree.getZTreeObj(treeId);
    var nodes = treeObj.transformToArray(treeObj.getNodes());
    var nodeLength = nodes.length;
    for (var i = 0; i .搜索条件     var searchCondition = $('#' + searchConditionId).val();
    //.得到模糊匹配搜索条件的节点数组集合     var highlightNodes = new Array();
    if (searchCondition != "") {
      var treeObj = $.fn.zTree.getZTreeObj(treeId);
      highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null);
    }
    //.高亮显示并展示【指定节点s】     highlightAndExpand_ztree(treeId, highlightNodes, flag);
  }
   
  
  function highlightAndExpand_ztree(treeId, highlightNodes, flag){
    var treeObj = $.fn.zTree.getZTreeObj(treeId);
    //. 先把全部节点更新为普通样式     var treeNodes = treeObj.transformToArray(treeObj.getNodes());
    for (var i = 0; i .收起树, 只展开根节点下的一级节点     close_ztree(treeId);
    //.把指定节点的样式更新为高亮显示，并展开     if (highlightNodes != null) {
      for (var i = 0; i 
    
class="input-append row-fluid" style="margin-bottom: 0px;">
      "search_condition" type="text" placeholder="请输入搜索条件" class="span8" style="font-size:12px"/>
      "button" class="btn btn-info" onclick="search_ztree('dep_tree', 'search_condition')">搜索
  
"dep_tree" class="ztree">

以上就是jquery ztree实现模糊搜索功能的代码，希望对大家的学习有所帮助。