Jquery結合Ztree生成樹

Ztree的api http://www.ztree.me/v3/api.php

Ztree的網上demo http://www.ztree.me/v3/demo.php#_102

Ztree的本地demo http://yunpan.cn/cLUREC8yghHRs  訪問密碼 9440

一、添加樣式、js

<link rel="stylesheet" href="${ctx}/hollybeacon/resources/plugins/zTree_v3/css/demo.css" type="text/css">
<link rel="stylesheet" href="${ctx}/hollybeacon/resources/plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.exedit-3.5.js"></script>
若是想要hideNodes、showNodes等方法，必須加入
<script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.exhide-3.5.js"></script>
若是不須要那些hideNodes、showNodes等方法以只添加一個js，代替上面的三個js
<script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.all-3.5.min.js"></script>

二、html設置一個div、ul，注意ul的class是固定的ztree

<div class="treecontentpane">
     <ul id="busTree" class="ztree">
     </ul>
</div>

三、寫js操做數據

 一、setting配置詳情
var setting = {
    //顯示
    view: {
             selectedMulti: false, //在複製的時候，是否容許選中多個節點。true爲支持，false不支持
            dblClickExpand: false, //雙擊的時候是否切換展開狀態。true爲切換，false不切換
             fontCss: setFontCss_ztree  //設置節點的顏色
     },
    //增刪改，移動複製
    edit: {
     enable: true, //若是enable爲flase，那麼樹就不能移動了
     showRemoveBtn: true, //是否顯示樹的刪除按鈕
     showRenameBtn: true, //是否顯示數的重命名按鈕
     isSimpleData : true, //數據是否採用簡單 Array 格式，默認false
     treeNodeKey : "id",  //在isSimpleData格式下，當前節點id屬性
     treeNodeParentKey : "parentId",//在isSimpleData格式下，當前節點的父節點id屬性
     showLine : true, //是否顯示節點間的連線
     removeTitle: "刪除節點",//刪除Logo的提示
     renameTitle: "編輯節點",//修改Logo的提示
     //拖拽
     drag: {
      isCopy: true,//可以複製
      isMove: true,//可以移動
     prev: false,//不能拖拽到節點前
      next: false,//不能拖拽到節點後
      inner: true//只能拖拽到節點中
     }
    },
    //異步
    async: {
     enable: true, //開啓異步加載
     type:"get",
     url:holly.getPath() + "/rest/treeCode/showZtreeSyncRest",
     contentType:"application/json",
     autoParam: ["id"], //異步加載數據，自動添加id參數，會自動獲取當前節點的id值
     dataFilter:filter, //過濾，跟easy-ui中的loadFilter方法同樣。
    otherParam: { "id":"1", "code_name":"固網測試"}//提交的時候就會提交參數id=1&code_name=固網測試
    },
    data:{
     key:{
      name:"codeName" //節點顯示的值
     },
     //
     simpleData:{
      enable:true,//若是爲true，能夠直接把從數據庫中獲得的List集合自動轉換爲Array格式。而沒必要轉換爲json傳遞
      idKey:"id",//節點的id
      pIdKey:"parentId",//節點的父節點id
      rootPId:null
     }
    },
    //回調函數
    callback: {
     beforeDrag: beforeDrag,//拖拽以前
     beforeDrop: beforeDrop,//拖拽結束
     onDrop: zTreeOnDrop,//拖拽結束後
     //onDrag: zTreeOnDrag,//拖拽的時候
     beforeRemove: zTreeBeforeRemove,//刪除節點前
     onRemove: zTreeOnRemove,//節點刪除以後
     beforeEditName: zTreeBeforeEditName,//進行編輯以前
     //beforeRename: zTreeBeforeRename,//重命名節點以前
     //onRename: zTreeOnRename,//重命名以後
     onClick: zTreeOnClick,//點擊
     onRightClick: zTreeOnRightClick,//右鍵
     onAsyncSuccess: zTreeOnAsyncSuccess//異步加載
     //beforeExpand: beforeExpand,//展開節點前
     //onAsyncSuccess: onAsyncSuccess,//異步數據加載成功的回調
    //onAsyncError: onAsyncError //異步數據加載錯誤後回調
    }
   };
二、zTree回調方法
  //對獲得的json數據進行過濾，加載樹的時候執行
   function filter(treeId, parentNode, responseData) {
      var contents = (responseData.content)?responseData.content:responseData;
      //當第一次加載的時候只顯示一級節點，可是要讓別人知道對應一級節點下是否有數據，那麼就須要設置isParent,爲true能夠展開，下面有數據。
    //我這裏是因爲異步加載數據，只加載根節點以及一級節點。那麼一級節點下還有子節點，因此設置isParent顯示還有子節點的效果
      if(contents.length >0){
       for(var i= 0 ; i <contents.length;i++){
       //是不是葉子節點
        var isParent = contents[i].isParent;
        if(isParent == false){
         isParent = true;
        }else{
         isParent = false;
        }
        contents[i].isParent = isParent;
       }
      }
      return contents;
     };
    //節點異步加載完成後顯示形狀
   //加載樹的默認顯示根節點，以及一級節點，每次異步加載數據都會執行這個方法，也就是有請求都會異步
    function zTreeOnAsyncSuccess(event, treeId, msg) {
      try {
      var treeObj = $.fn.zTree.getZTreeObj("busTree");
       //獲取全部節點
       var nodes = treeObj .getNodes();
       for(var i = 0;i<nodes.length;i++){
       //展開一級節點
        treeObj .expandNode(nodes[i], true);
       }
      } catch (err) {
       holly.showError("數據異常", err);
      }
    }
    //設置一個標識，是爲了解決點擊的時候，執行異步。顯示全部的以及節點，以及一級節點下的全部節點
   注意：若是你是異步只加載了根節點和一級節點，那麼增刪改的時候，獲得的異步結果，會獲取不到該節點的子節點，只有zTreeOnAsyncSuccess方法執行完後，纔可以取到子節點的信息。因此在Eclipse中run執行和debugger執行獲得不一樣的結果。由於run運行數據還沒接受到。
    /* var firstAsyncSuccessFlag = 0;
    function zTreeOnAsyncSuccess(event, treeId, msg) {
     if (firstAsyncSuccessFlag == 0 ) {
      try {
      var treeObj = $.fn.zTree.getZTreeObj("busTree");
       var selectedNode = zTree.getSelectedNodes();
      //獲取整個json節點
       var nodes = zTree.getNodes();
       //展開根節點下的第一個節點
      treeObj.expandNode(nodes[0], true);
       //把根節點下的全部節點轉換爲數組
       var childNodes = zTree.transformToArray(nodes[0]);
       //展開根節點下的第一個節點的第一節節點
       treeObj .expandNode(childNodes[1], true);
       //選中根節點下的第一個節點
       treeObj .selectNode(childNodes[1]);
      firstAsyncSuccessFlag = 1;
      } catch (err) {
       holly.showError("數據異常", err);
      }
     }
    }*/
   //初始化樹
   zTree = $.fn.zTree.init($("#busTree"), setting);
   //獲取樹
   var treeObj = $.fn.zTree.getZTreeObj("busTree");
   //異步刷新整個樹，不推薦使用
   treeObj.reAsyncChildNodes(null, "refresh");
   //新增的時候局部刷新，刷新子節點
   treeObj.reAsyncChildNodes(zTree.getSelectedNodes().childNodes,"refresh");
   //修改的節點的時候，更改節點信息
   //一、設置節點值
   treeObj.getSelectedNodes()[0].codeName = $("#treeRootCodeName").val();
   treeObj.getSelectedNodes()[0].codeValue = $("#treeRootCodeValue").val();
   treeObj.SelectedNodes()[0].remark = $("#treeRootRemark").val();
   //二、更新節點信息
   treeObj.updateNode(zTree.getSelectedNodes()[0]);
    
    //搜索功能：
    一、根據查詢的結果，顯示對應樹形結構。注意這裏只能是對應查找幾級節點的信息，還有待優化。
    //根據code_name模糊查詢
    function searchByValue(){
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        //通過transformToArray轉換後是一個Array數組，數組裏的每一個元素都是object對象，這個對象裏包含了node的21個屬性。
        var nodes = zTree.transformToArray(zTree.getNodes()[0].children);
        var key=$("#codeName").val();
        //空格回車符 不作查詢 直接顯示所有
        if(/^\s*$/.test(key)){
         //updateNodes(false);
         zTree.showNodes(nodes);
         return;
        }
        //首先隱藏
        zTree.hideNodes(nodes);
        var nodeList=zTree.getNodesByParamFuzzy("CODE_NAME", key); //模糊匹配
        //把獲得的節點放到filterNodes臨時數組中
        var filterNodes=[];
        for(var i=0;i<nodeList.length;i++){
            //這裏只能是級別是2的
             if(nodeList[i].level==2) {
                filterNodes.push(nodeList[i]);
             }
        }
        //顯示
        zTree.showNodes(filterNodes);
        //取得每個節點的父節點，進行展現
        for(var i=0;i<filterNodes.length;i++){
             //主要是找不到父節點的問題
               var parentNode = filterNodes[i].getParentNode();
            //展開當前節點的父節點下的全部節點
             zTree.expandNode(parentNode, true, false, false);
             //顯示全部父節點
             zTree.showNode(parentNode);         
         }
    }
    二、搜索變色功能，可是會顯示所有信息，查詢到的結果會顯示不一樣的顏色
    //展開全部節點
    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 < nodeLength; i++) {
            if (nodes[i].PARENT_ID == null) {
                //根節點：展開
                treeObj.expandNode(nodes[i], true, true, false);
            } else {
                //非根節點：收起
                treeObj.expandNode(nodes[i], false, true, false);
            }
        }
    }
    //查詢的onclick時間
    function searchByValue(){
         searchByFlag_ztree("treeDemo","codeName");
    }
    //獲得查詢結果，並進行設置樣式和展開
    function searchByFlag_ztree(treeId, searchConditionId){
        //<1>.搜索條件
        var searchCondition = $('#' + searchConditionId).val();
        //<2>.獲得模糊匹配搜索條件的節點數組集合
        var highlightNodes = new Array();
        if (searchCondition != "") {
            var treeObj = $.fn.zTree.getZTreeObj(treeId);
            //模糊查詢
            highlightNodes = treeObj.getNodesByParamFuzzy("CODE_NAME", searchCondition, null);
        }
        //<3>.高亮顯示並展現【指定節點】
        highlightAndExpand_ztree(treeId, highlightNodes);
    }
    //展開，並顯示不一樣顏色
    function highlightAndExpand_ztree(treeId, highlightNodes){
        var treeObj = $.fn.zTree.getZTreeObj(treeId);
        //<1>. 先把所有節點更新爲普通樣式
        var treeNodes = treeObj.transformToArray(treeObj.getNodes());
        var nodes = treeObj.transformToArray(treeObj.getNodes()[0].children);
        for (var i = 0; i < treeNodes.length; i++) {
            treeNodes[i].highlight = false;
            treeObj.updateNode(treeNodes[i]);
        }
        //<2>.收起樹, 只展開根節點下的一級節點
        close_ztree(treeId);
        //<3>.把指定節點的樣式更新爲高亮顯示，並展開
        if (highlightNodes != null) {
            for (var i = 0; i < highlightNodes.length; i++) {
                  //高亮顯示節點，並展開
                  highlightNodes[i].highlight = true;
                  treeObj.updateNode(highlightNodes[i]);
                  //高亮顯示節點的父節點的父節點....直到根節點，並展現
                  var parentNode = highlightNodes[i].getParentNode();
                  var parentNodes = getParentNodes_ztree(treeId, parentNode);
                  //展開
                  treeObj.expandNode(parentNodes, true, false, true);
                  treeObj.expandNode(parentNode, true, false, true);
                  //設置顏色
                  setFontCss_ztree("",highlightNodes[i]);
            }
        }
    }
    //遞歸查找父節點
    function getParentNodes_ztree(treeId, node){
        if (node != null) {
            var treeObj = $.fn.zTree.getZTreeObj(treeId);
            var parentNode = node.getParentNode();
            return getParentNodes_ztree(treeId, parentNode);
        } else {
            return node;
        }
    }
    //設置顏色
    function setFontCss_ztree(treeId, treeNode) {
        if (treeNode.PARENT_ID == null) {
            //根節點
            return {color:"#333", "font-weight":"bold"};
        } else if (treeNode.isParent == false){
            //葉子節點
            return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#660099", "font-weight":"normal"};
        } else {
            //父節點
            return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
        }
    }
    //點擊的時候判斷節點有沒有數據，以便於datadrid是否請求後臺刷新
    if(treeNodes.isParent){
        datagrid刷新
    }else{
        提示
    }
  //獲取過濾以外的全部數據
  var filterNodes = treeObj.getNodesByFilter(filters);
  function filters(node) {
        return (node.highlight == true);
   }
  //獲取過濾的全部數據
  treeObj.getNodesByParamFuzzy("CODE_NAME", searchCondition, null);
  //當焦點放在節點上顯示新增Logo
  function addHoverDom(treeId, treeNode) {
      var sObj = $("#" + treeNode.tId + "_span");
      if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
      var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
       + "' title='新增節點' onfocus='this.blur();'></span>";
      sObj.after(addStr);
      var btn = $("#addBtn_"+treeNode.tId);
      if (btn) btn.bind("click", function(){
      //彈出easy-ui新增對話框
      treeBusinessManager.newTreeDialog();
       return false;
      });
  };
 //當鼠標不在節點的時候，自動隱藏新增按鈕
  function removeHoverDom(treeId, treeNode) {
      $("#addBtn_"+treeNode.tId).unbind().remove();
  };
  //獲取某個節點下的全部節點
 //需求：當只能在葉子節點上添加數據的時候，可是展示的時候，須要若是點擊葉子節點顯示葉子節點的數據，點擊節點顯示該節點下的全部葉子節點的信息。
 //注意：這裏數據用，區分id，是爲了去後臺進行in查詢
  function getAllChildNodes(treeNode) {
        var treeObj = $.fn.zTree.getZTreeObj("sheetTree");//獲取ztree
        var childNodes = treeObj.transformToArray(treeNode);//把該節點的下的全部數據轉換爲數組
        var nodes = new Array();
        var j = 0;
        for(i = 0; i < childNodes.length; i++) {
          //只有保存葉子節點的數據
           if(!childNodes[i].isParent){
                     nodes[j] = childNodes[i].id;
                     //nodes.join(",");
                     j++;
           }
        }
        return nodes;
  }
  //獲取該節點下的全部子節點
  getChildNodes:function(treeNode,result){
        if (treeNode.isParent) {
          var childrenNodes = treeNode.children;
          if (childrenNodes) {
              for (var i = 0; i < childrenNodes.length; i++) {
                  result += ',' + childrenNodes[i].id;
                  result = sheetShareManager.getChildNodes(childrenNodes[i], result);
              }
          }
      }
      return result;
  }
 //刷新節點
    function refreshNode(id) {
     var treeObj = $.fn.zTree.getZTreeObj("busTree");
        var node = treeObj.getNodeByParam("id", id, null);
        if (node) {
         treeObj.reAsyncChildNodes(node, "refresh");
        } else {
            setTimeout(function() {
                refreshNode(id);
            }, 10);
        }
    }
    //刷新父節點
    function refreshParentNode(id) {
     var treeObj = $.fn.zTree.getZTreeObj("busTree");
        var node = treeObj.getNodeByParam("id", id, null);
        var pNode = node.getParentNode();
        if (pNode) {
            refreshNode(pNode.id);
        } else {
            refreshNode("0");
        }
    }
//刪除根節點的時候，銷燬整棵樹
$.fn.zTree.destroy("busTree");

//修改節點名，判斷是否爲空，或者超出限制
function zTreeBeforeRename(treeId, treeNode, newName, isCancel) {
	if (newName.length>10||newName.trim().length<=0) {
		toastr.error("填寫信息不符合規則!");
		var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
		treeObj.cancelEditName();
		return false;
	}
	return true;
}
function zTreeOnRename(event, treeId, treeNodes, isCancel) {
	//真正觸發的時候爲undefiend。觸發不成功的時候，爲true
	if(isCancel == undefined){
	    //修改操做
	}
}

 //右鍵顯示新增，修改，刪除（與easy-ui總體相似）
 //右鍵，填出編輯框
 function zTreeOnRightClick(event, treeId, treeNode) {
  var treeObj = $.fn.zTree.getZTreeObj("busTree");
  //設置選中右鍵節點
  treeObj.selectNode(treeNode);
  //這裏能夠爲爲div添加click事件，進行新增，修改，刪除操做。
  注意：設置選中節點，才能去對應的操做方法中獲取選中的幾點
  （var treeObj = $.fn.zTree.getZTreeObj("busTree");
     var nodes = treeObj.getSelectedNodes();）
   $('#configure-tree-menu').menu('show',{left: event.pageX,top: event.pageY});
 };
 
 //刪除節點的時候須要注意
 //因爲數據是異步加載的，因此不只須要進行數據刪除，還須要進行邏輯刪除。不然數據沒有及時的回顯，那麼樹的狀態isParent還沒改變。
  for (var i=0, l=nodes.length; i < l; i++) {
     treeObj.removeNode(nodes[i]);
  }
 //在onBeforeRemove中操做，異步的判斷
 //在數據操做成功以後
   var treeObj = $.fn.zTree.getZTreeObj("busTree");
    treeObj.selectNode(treeNode);
    var nodes = treeObj.getSelectedNodes();
    for (var i=0, l=nodes.length; i < l; i++) {
    	treeObj.removeNode(nodes[i]);//默認是false，若是設置爲true,那麼就會觸發onRemove函數
    }

 //html中的menu
 <div id="configure-tree-menu" class="easyui-menu" style="width:150px;">
  <div id="configureAdd"  data-options="iconCls:'icon-add'">新增節點</div>
  <div id="configureEdit"  data-options="iconCls:'icon-edit'">編輯節點</div>
  <div id="configureDelete" data-options="iconCls:'icon-remove'">刪除節點</div>
</div>