Ztree 结合 JQuery-ui autocomplete 实现搜索

引入ztree 和 jquery-ui

<link rel="stylesheet" href="lib/zTree_v3/css/zTreeStyle/zTreeStyle.css">
<script src="lib/jquery/jquery-1.9.1.min.js"></script>
<script src="lib/jquery-ui/jquery-ui.js"></script>
<script src="lib/zTree_v3/js/jquery.ztree.core.js"></script>

页面结构

  <div class="ht_org_left">
    <div class="ht_org_search">
      <input type="text" class="layui-input" id="search_org">
    </div>
    <div class="ht_org_tree">
        <ul id="ht_tree" class="ztree"></ul>
    </div>
  </div>

JS 实现方式

define([
  'css!org.css',
  'text!org.html',
  'tpl',
  'org_basic',
	'user_info',
	'user_hr',
  'user_other','http','cache'
], function (css, html, tpl,org_basic,user_info,user_hr,user_other,http,cache) {
  'use strict';

  var htOrgTree = {
    zNodes:[],
    baseInfo:{},
		hrInfo:{},
    otherInfo:{},
    init:function(){
      http.get('user/baseInfo/'+cache.getToken()).then(function(data){
				htOrgTree.baseInfo = data;
				org_basic.render('#org_basic',htOrgTree.baseInfo);
				user_info.render('#org_content',htOrgTree.baseInfo);
			})
			http.get('user/hrInfo/'+cache.getToken()).then(function(data){
				htOrgTree.hrInfo = data;
			})
			http.get('user/otherInfo/'+cache.getToken()).then(function(data){
				htOrgTree.otherInfo = data;
			})
      var setting = {
        view: {
          fontCss : htOrgTree.setFontCss
        },
        callback:{
          onClick:htOrgTree.getUserInfo,
          onExpand:htOrgTree.loadChildren
        }
      };
      http.get('org/init').then(function(data){
        var root = {
          name:"根节点", 
          open:true,
          iconSkin:'ht_root',
          type:'org',
          children: []
        }
        if(data && data.length > 0){
          $.each(data,function(index,item){
            item.iconSkin = 'ht_icon_1';
            item.children = [];
          })
        }
        root.children = data;
        htOrgTree.zNodes.push(root);
        $.fn.zTree.init($("#ht_tree"), setting, htOrgTree.zNodes);
      })
    },
    loadChildren:function(event, treeId, treeNode){
      var id = treeNode.code;
      var treeObj = $.fn.zTree.getZTreeObj(treeId);
      var node = treeObj.getNodeByTId(treeNode.tId);
      //判断该节点下是否有节点,没有就加载节点
      if(treeNode.children.length == 0){
        http.get('org/findOrgUser?code='+id).then(function(data){
          if(data && data.length>0){
            $.each(data,function(index,item){
              if(item.type == 'org'){
                item.children = [];
                item.iconSkin = 'ht_icon_1'
              }else {
                item.iconSkin = 'ht_icon_2'
              }
            })
          }
          treeObj.addNodes(node, data);
        })
      }
    },
    setFontCss:function(treeId, treeNode){
      return  treeNode.type == 'org'  ? {color:"#ec6c00"} : {};
    },
    bindTabEvent:function(){
      $('#org_nav .nav_item').on('click',function(){
        var index = $(this).index();
        $(this).addClass('active').siblings().removeClass('active');
        switch (index){
          case 0:
            user_info.render('#org_content',htOrgTree.baseInfo);
            break;
          case 1:
            user_hr.render('#org_content',htOrgTree.hrInfo);
            break;
          case 2:
            user_other.render('#org_content',htOrgTree.otherInfo);
            break;	
        }
      })
    },
    getUserInfo:function(event, treeId, treeNode){
      if("user"==treeNode.type){
        $('#org_nav .nav_item:first-child').click();
        $('#org_nav .nav_item:first-child').siblings().css("display","none");
        var code=treeNode.code;
        http.get('user/baseInfo/'+code).then(function(data){
            htOrgTree.baseInfo = data;
            org_basic.render('#org_basic',htOrgTree.baseInfo);
            user_info.render('#org_content',htOrgTree.baseInfo);
        });
        if(treeNode.check){
          $('#org_nav .nav_item:first-child').siblings().css("display","inline-block");
          http.get('user/hrInfo/'+code).then(function(data){
            htOrgTree.hrInfo = data;
          });
          http.get('user/otherInfo/'+code).then(function(data){
            htOrgTree.otherInfo = data;
          });
        }else{
          htOrgTree.hrInfo=[];
          htOrgTree.otherInfo =[];
        }
      }
    },
    bindClose:function(){
      $('#org_close').on('click',function(){
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭      
      })
    },
    bindSearchEvent:function(){
      $("#search_org").autocomplete({
        minLength:1,
        max:5,
        scroll: true,
        scrollHeight: 100,
        source: function (request, response) {
          http.get('org/search?keyword='+request.term).then(function(data){
            response( $.map( data, function( item ) {  
                return {
                  code:item.code,
                  value:item.name,
                  check:item.check,
                  orgPath:item.orgPath,
                  type:item.type
                }  
              }
            ));
          })
        },
        focus: function( event, ui ) {
          return false;
        },
        select: function(event, ui ) {
          var orgPath = ui.item.orgPath;
          var useCode = ui.item.code;
          htOrgTree.loadSearch(orgPath,0,useCode);
        }
      });
    },
    loadSearch:function(orgPath,idx,useCode){
      var treeObj = $.fn.zTree.getZTreeObj("ht_tree");
      var nodes = treeObj.transformToArray(treeObj.getNodes());
          nodes.splice(0,1);
      $.each(orgPath,function(oIdx,oItem){
        $.each(nodes,function(nIdx,nItem){
          if(oItem == nItem.code){
            if(nItem.children.length > 0){
              var searchNode = treeObj.getNodeByParam("code", useCode, null);
              if(searchNode){
                treeObj.expandNode(nItem, true, true, true);
                console.log(searchNode)
                treeObj.selectNode(searchNode);
                $('#'+searchNode.tId+'_a').click();
              }
            }else {
              var node = treeObj.getNodeByTId(nItem.tId);
              htOrgTree.testArr = node;
              http.get('org/findOrgUser?code='+nItem.code).then(function(data){
                if(data && data.length>0){
                  $.each(data,function(index,item){
                    if(item.type == 'org'){
                      item.children = [];
                      item.iconSkin = 'ht_icon_1'
                    }else {
                      item.iconSkin = 'ht_icon_2'
                    }
                  })
                }
                treeObj.addNodes(node, data);
                htOrgTree.loadSearch(orgPath,idx+1,useCode);
              })
            }
            return false;
          }
        })
      })
      if(idx == orgPath.length){
        var searchNode = treeObj.getNodeByParam("code", useCode, null);
        treeObj.selectNode(searchNode);
        $('#'+searchNode.tId+'_a').click();
      }
    }
  }
  return {
    render: function (node, data) {
      $(node).html(tpl.render(html, data));
      htOrgTree.init();
      htOrgTree.bindTabEvent();
      htOrgTree.bindClose();
      htOrgTree.bindSearchEvent(); //绑定搜索事件
    },
  }
});