Jquery結合Ztree生成樹

尊重作者，附原文鏈接：http://my.oschina.net/u/2472104/blog/529055

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操作數據

 

1、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 //異步數據加載錯誤后回調

    }

   };

2、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");

   //修改的節點的時候，更改節點信息

   //1、設置節點值

   treeObj.getSelectedNodes()[0].codeName = $("#treeRootCodeName").val();

   treeObj.getSelectedNodes()[0].codeValue = $("#treeRootCodeValue").val();

   treeObj.SelectedNodes()[0].remark = $("#treeRootRemark").val();

   //2、更新節點信息

   treeObj.updateNode(zTree.getSelectedNodes()[0]);

    

    //搜索功能：

    1、根據查詢的結果，顯示對應樹形結構。注意這里只能是對應查找幾級節點的信息，還有待優化。

    //根據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);         

         }

    }

    2、搜索變色功能，但是會顯示全部信息，查詢到的結果會顯示不同的顏色

    //展開所有節點

    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>