匯入js檔案和css檔案

<script type="text/javascript" src="js/zTree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="js/zTree/jquery.ztree.excheck-3.5.js"></script>

<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">

html程式碼

<div class="tree" style="height: 500px; overflow: auto; float: left; width: 20%">
      <input type="hidden" id="fznamehide"/>
      <div class="clearfix">
      </div>
      <ul id="tree" class="ztree"></ul>
</div>

js指令碼

var vAddNodeId;//新增節點ID
 var vParentId;//父節點ID
 var vNodeSel = '<%=strRootNodeId%>'; //選中的節點ID

 var setting = {
   view : {
    dblClickExpand : false,
    showLine : true,
    removeHoverDom: removeHoverDom,
    addHoverDom: addHoverDom,
    selectedMulti : false
        },
     check: {
     enable: false
    },
   data : {
     simpleData : {
     enable : true,
     idKey : "id",                               //子節點
     pIdKey : "pId",                           //父節點
     rootPId : "0"                               //根節點
    }
   },
   edit: {                                          //樹形結構可編輯
    enable: true,
     showRemoveBtn: showRemoveBtn,
    showRenameBtn: showRenameBtn,
    renameTitle: "編輯分組名稱",
    removeTitle: "刪除分組"
   },
   async: {
     enable: true,
     type:"post",
     

url:getUrl,                                //獲取資料url
     autoParam:["id"],
     otherParam:{"rootNodeId":'<%=strRootNodeId%>'}
    },
   // 回撥函式
   callback : {
    onClick : function(event, treeId, treeNode, clickFlag) {
     vNodeSel = treeNode.id;
     vParentId = treeNode.pId;
     $("#tableMain").dataTable().fnDraw();
    },
    onAsyncSuccess:zTreeOnAsyncSuccess,
    //捕獲非同步加載出現異常錯誤的事件回撥函式 和 成功的回撥函式
    onAsyncError : zTreeOnAsyncError,
   }
  };

function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
   //設定新增節點為選中狀態
   if(vAddNodeId != ''){
    var node = treeObj.getNodeByParam("id", vAddNodeId, null);
    treeObj.selectNode(node,false);
    vAddNodeId = '';
   }
   //初始化樹預設根節點為選中
   if(vNodeSel == '<%=Tool.ROOT_NODE_ID%>'){
    var node = treeObj.getNodeByParam("id", vNodeSel, null);
    treeObj.selectNode(node,false);
   }
  }
  
  function getUrl(treeId, treeNode){
   return 'message/MessAnalysis_getTeamTreeInfo';
  }
  
  // 載入錯誤提示
  function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
   alert("載入錯誤：" + XMLHttpRequest);
  };
  function addHoverDom(treeId, treeNode) {
  //根目錄才顯示新增按鈕
  if(treeNode.id != 1){   
   return ;
  }
  var sObj = $("#" + treeNode.tId + "_span");
  if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
  
   var vSelectNode = treeObj.getSelectedNodes();     
      var vselSel = vSelectNode[0].id; //當前標記為選中的節點
  
  if (btn) btn.bind("click", function(){
    var vselNodes = treeObj.getSelectedNodes();   //當前標記為選中的節點   
       vParentId = vselNodes[0].id;
       if( vParentId !=1){
        $(".ui-dialog:eq(6) .ui-dialog-buttonpane button:first").addClass("btn btn-success");
     $(".ui-dialog:eq(6) .ui-dialog-buttonpane button:first").html("<i class='icon-ok icon-white'></i>&nbsp;確定");      
        $("#dialog-addalert" ).dialog( "open" );       
     return ;
    } 
  });
  };
  function removeHoverDom(treeId, treeNode) {
   console.log("remove   " + "#addBtn_"+treeNode.id);
   $("#addBtn_"+treeNode.tId).unbind().remove();
  };

  $.fn.zTree.init($("#tree"), setting);                                  //初始化ztree
  treeObj = $.fn.zTree.getZTreeObj("tree");