Ztree树形结构结合tabs以及各种事件

前端页面引入js文件即可；

页面标签

  <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="font-size: 14px;margin: 0PX;">
                  <ul class="layui-tab-title" style="font-size: 20px;height: 45px;">
                    <li class="layui-this">线路</li>
                    <li>区域</li>
                    <li>类型</li>
                   
                  </ul>
                  <div class="layui-tab-content"  >
                    <div class="layui-tab-item layui-show"  >
                        <div style="width:230px;height:800px; background:#fff; float: left;overflow-y: scroll;" youjian="youjian">
                            <input type="hidden" id="ztreeLineId"/>
                            <input type="hidden" id="ztreeLineName"/>
                            <div class="widget-content tab-content" >
                            <i class='fa fa-refresh ensp' style="float: right;cursor: pointer;" id="selectline"></i>
                                 <div class="content_wrap"  >  
                                      <div class="zTreeDemoBackground " >  
                                          <ul id="treeDemo3" class="ztree"></ul>  
                                      </div>  
                                 </div>  
                            </div>  
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div style="width:230px;height:800px; background:#fff; float: left;overflow-y: scroll;" youjian="youjian">
                            <input type="hidden" id="ztreeBuildId"/>
                            <input type="hidden" id="ztreeBuildName"/>
                            <div class="widget-content tab-content" >
                            <i class='fa fa-refresh ensp' style="float: right;cursor: pointer;" id="selectbuild"></i>
                                 <div class="content_wrap" >  
                                      <div class="zTreeDemoBackground ">  
                                          <ul id="treeDemo1" class="ztree"></ul>  
                                      </div>  
                                 </div>  
                            </div>  
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div style="width:230px;height:800px; background:#fff; float: left;overflow-y: scroll;" youjian="youjian">
                            <input type="hidden" id="propertyId"/>
                            <input type="hidden" id="propertyName"/>
                            <div class="widget-content tab-content" >  
                            <i class='fa fa-refresh ensp' style="float: right;cursor: pointer;" id="selectproperty"></i>
                                 <div class="content_wrap">  
                                      <div class="zTreeDemoBackground ">  
                                          <ul id="treeDemo2" class="ztree"></ul>  
                                      </div>  
                                 </div>  
                            </div>  
                        </div>
                    </div>
                   
                  </div>
                </div>

ztree.js内容如下：

function lineZtree(ztreeurl,addurl,delurl,updateurl,flag,saveUrl,upUrl,viewUrl){
     var dragId;
     var zTree_Menu;
     if (flag==1) {
        var setting = {
                
                async: {
                    enable: true,
                    contentType: "application/json",
                    url: ztreeurl,
                    autoParam: ["id", "name","pid", "type"]
                },
                 view: {  
                     selectedMulti: true, //设置是否允许同时选中多个节点。
                     showLine: true,  //设置 zTree 是否显示节点之间的连线。
                     showIcon: true  //设置 zTree 是否显示节点的图标。
                 },
                 check:{
                     enable: false,//设置是否显示 checkbox / radio
                     chkboxType: { "Y": "ps", "N": "ps" },//勾选 checkbox 对于父子节点的关联关系。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时生效]
                     chkStyle: "checkbox"//勾选框类型(checkbox 或 radio）[setting.check.enable = true 时生效]
                 },
                 data: {  
                     simpleData: {  
                         enable: true  
                     }  
                 },
                 callback: {
                     onClick: zTreeOnClick,//单机
//                          beforeClick: beforeClick,//单击事件判断是否有下一级子菜单
                      onCheck: zTreeOnCheck,//单选多选事件
                      onRemove: zTreeOnRemove,
                      onRightClick:onRightClick//右键事件
                 }
             };
    }else {
        var setting = {  
                async: {
                    enable: true,
                    contentType: "application/json",
                    url: ztreeurl,
                    autoParam: ["id", "name","pid", "type"]
                },
                 view: {  
                     selectedMulti: true, //设置是否允许同时选中多个节点。
                     showLine: true,  //设置 zTree 是否显示节点之间的连线。
                     showIcon: true  //设置 zTree 是否显示节点的图标。
                 },
                 check:{
                     enable: false,//设置是否显示 checkbox / radio
                     chkboxType: { "Y": "ps", "N": "ps" },//勾选 checkbox 对于父子节点的关联关系。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时生效]
                     chkStyle: "checkbox"//勾选框类型(checkbox 或 radio）[setting.check.enable = true 时生效]
                 },
                 data: {  
                     simpleData: {  
                         enable: true  
                     }  
                 },
                 callback: {
                     onClick: zTreeOnClick,//单机
//                          beforeClick: beforeClick,//单击事件判断是否有下一级子菜单
                      onCheck: zTreeOnCheck,//单选多选事件
                      onAsyncSuccess:zTreeOnAsyncSuccess,//加载树成功后默认回调
                      onRemove: zTreeOnRemove
                 }
             };
    }
     var firstAsyncSuccessFlag = 0;
     function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
         if (firstAsyncSuccessFlag == 0) {    
             var zTree = $.fn.zTree.getZTreeObj(treeId);
             var nodes = zTree.getNodes();
             var node=nodes[0].children[0];
             zTree.selectNode(node); //选中第一个子节点
             zTree.setting.callback.onClick(null, zTree.setting.treeId, node);//调用事件  
             firstAsyncSuccessFlag = 1;    
            
             }    
        };
     
     
     function zTreeOnRemove(event, treeId, treeNode) {
            alert(treeNode.tId + ", " + treeNode.name);
        }
        
     
     function zTreeOnCheck(event, treeId, treeNode) {//单选多选事件
         var treeObj=$.fn.zTree.getZTreeObj("treeDemo3");
         nodes=treeObj.getCheckedNodes(true);
   };
     function beforeClick(treeId, treeNode) {  //单击事件判断是否有下一级子菜单
         alert(treeNode.id);
         var check = (treeNode && !treeNode.isParent);  
         if (!check) alert("请不要选择类别...");  
         return check;  
     }  
     function zTreeOnClick(event, treeId, treeNode) {//单机事件
         if(flag==1){
             var ztreeLineId=treeNode.id;
             var stime=$("#stime").val();
             var etime=$("#etime").val();
             $('#table_list').setGridParam({postData:{"stime":stime,"etime":etime,"officeId":"","lineId":"","buildId":"","cjqId":"","meterId":"","ztreeLineId":"","buildName":"","lineName":"","measureName":"","ztreeLineId":ztreeLineId,"propertyId":"","ztreeBuildId":""}}).trigger("reloadGrid");
         }else if (flag==0){
             if(treeNode.type==1){
                
             }else{
                 var id=treeNode.id;
                 selectModel(id)
             }
            
         }
        
             
     }
            
     function onRightClick(event, treeId, treeNode){//右键事件
        
         $("#div").remove();
         if(treeNode.type==1){
             $("body").prepend($("<div id='div' class='shadow'  style='position:absolute; width: 100px;height:60px;background: #fff; display: none;border:1px solid #eee'>"
                     +"<ul>"
             +"<li id='lineadd' class='ztreeli' style=''> <i class='fa fa-plus ensp i-sty'></i>新增仪表</li>"
             +"<div style='width: 100%;height: 1px;background: #eee'></div>"
             +"<li id='lineselect' class='ztreeli' style=''> <i class='fa fa-refresh ensp i-sty'></i>列表刷新</li>"
             +"</ul>"
             +"</div>"))
         }else if(treeNode.type==2){
             $("body").prepend($("<div id='div' class='shadow'  style='position:absolute; width: 100px;height:120px;background: #fff; display: none;border:1px solid #eee'>"
                     +"<ul>"
             +"<li id='linedelete' class='ztreeli' style=''> <i class='fa fa-trash-o ensp i-sty' ></i>删除仪表</li>"
             +"<div style='width: 100%;height: 1px;background: #eee'></div>"
             +"<li id='lineupdate' class='ztreeli' style=''> <i class='fa fa-edit ensp i-sty'></i>修改仪表</li>"
             +"<div style='width: 100%;height: 1px;background: #eee'></div>"
             +"<li id='lineview' class='ztreeli' style=''> <i class='fa fa-eye ensp i-sty'></i>查看仪表</li>"
             +"<div style='width: 100%;height: 1px;background: #eee'></div>"
             +"<li id='lineselect' class='ztreeli' style=''> <i class='fa fa-refresh ensp i-sty'></i>刷新仪表</li>"
             +"</ul>"
             +"</div>"))
         }
        
         event = event||window.event;
         x=event.clientX
         y=event.clientY
         document.getElementById("div").style.left =  x + "px";
         document.getElementById("div").style.top =  y + "px";
         document.getElementById("div").style.display = "";
         document.getElementById("ztreeLineId").value=treeNode.id;
         document.getElementById("ztreeLineName").value=treeNode.name;
         }
    
     //加载树
     $(document).ready(function(){
         $.fn.zTree.init($("#treeDemo3"), setting);
     });
     
     function resZtree(){
         var treeObj = $.fn.zTree.getZTreeObj("treeDemo3");
         treeObj.reAsyncChildNodes(null, "refresh");
          document.getElementById("div").style.display = "none";
          firstAsyncSuccessFlag = 0;
      }
     $("#lineadd").live("click",function(){
        
                 var ztreeLineId=$("#ztreeLineId").val();
                 ztreeaddAndEdit(" ", addurl+"?ztreeLineId="+ztreeLineId,saveUrl, "750px", "600px");
            document.getElementById("div").style.display = "none";
         });
     $("#lineupdate").live("click",function(){
         
             var ztreeLineId=$("#ztreeLineId").val();
             ztreeaddAndEdit(" ", updateurl+"?meterId="+ztreeLineId,upUrl, "750px", "600px");
        document.getElementById("div").style.display = "none";
    });
     $("#lineview").live("click",function(){
             var ztreeLineId=$("#ztreeLineId").val();
             openDialogView(' ', viewUrl+"?meterId="+ztreeLineId,"750px","600px");
        document.getElementById("div").style.display = "none";
    });
     
     //删除事件
     $("#linedelete").live("click",function(){
             var ztreeLineId=$("#ztreeLineId").val();
             var a=confirm("您确定要删除该节点信息？");
             if(a==true){
                 $.post(delurl,{"id":ztreeLineId},function(data) {
                     layer.msg(data, {icon: 1});
                     selectztree();selectTable();
                     });
             }else{
                 
             }
            document.getElementById("div").style.display = "none";
         });
     
    //刷新事件
     $("#lineselect").live("click",function(){
         resZtree();
        });
     $("#selectline").live("click",function(){
         resZtree();
        });
     
 
   
     //body 单机事件
     window.οnlοad=function(){
            document.οnmοusedοwn=function(ev){
            var ev = ev || window.event; //浏览器兼容性
         var elem = ev.target || ev.srcElement;
         while (elem) { //循环判断至跟节点，防止点击的是div子元素
             if (elem.id && elem.id == 'div') {
                 return;
             }
             elem = elem.parentNode;
         }
              document.getElementById("div").style.display = "none";
      }
 }
}

function res(){
     var treeObj = $.fn.zTree.getZTreeObj("treeDemo3");
     treeObj.reAsyncChildNodes(null, "refresh");
}