ztree使用基本方法及遇到的問題解決辦法

簡介：

zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。

API學習網站：http://www.ztree.me/v3/api.php

 

1.使用ztree需要首先引入如下的js,根據自己需要引入：

jquery-1.4.4.min.js     jquery 核心基礎庫（當然可以引入其他版本）
jquery.ztree.core-3.1.js    ztree核心基礎庫
jquery.ztree.excheck-3.1.js  如果要用多選功能需要加上這個js
jquery.ztree.exedit-3.1.js  如果要用編輯功能需要加上這個js

 

2.基本常用的方法：

 設置初始化參數：

var  zNodes;
   var setting = 
   {
    edit: {
     enable: true,
     showRemoveBtn:showRemoveBtn,
     showRenameBtn:showRenameBtn,
     removeTitle: "刪除節點",
     renameTitle: "編輯節點名稱"
    },
    view: { 
     addHoverDom: addHoverDom,
     removeHoverDom: removeHoverDom
    },
    data: {
     key:{
      name:"mydefname"
     },
     simpleData: { 
      enable: true,
      idKey: "mydefid",
      pIdKey: "parentid",
      rootPId: 0
     }
    }, 
    callback: { 
     onClick: zTreeOnClick ,
     beforeRemove: zTreeBeforeRemove,
     beforeRename: zTreeBeforeRename
    }
  };

//是否顯示編輯按鈕

   function  showRenameBtn(treeId, treeNode){
   
    //獲取節點所配置的noEditBtn屬性值
    if(treeNode.isCommon != "" && treeNode.isCommon=="1"){
    
     return false;
    
    }else{
     return true;
    }
   }

初始化樹的結構：

$.ajax({  
    url:'123.action?abc=' + Math.random(),
       async : false,   
      cache:false,   
       type: 'POST',   
       dataType : "json",
       success: function(data){
        zNodes=data.result;
       }    
   });

$(document).ready(function()
   {
    $.fn.zTree.init($("#treeDemo"), setting, zNodes); 
   });

zTreeBeforeRename等的這些方法都可以進行重寫，只要返回false就可以終止方法的執行。

 

使用時遇到的問題總結：

1、如果不使用 name 屬性保存節點名稱，請修改 setting.data.key.name，如上面;

2、當你改了屬性id時，獲取時也用mydefid，而不是用id;

3.ztree顯示增刪改按鈕

改刪：
/jquery.ztree.exedit-3.5.js

增：
在zTreeStyle.css中添加
.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}

然後寫：addHoverDom方法。

function addHoverDom(treeId, treeNode) {
    var sObj = $("#" + treeNode.tId + "_span");
    if ($("#addBtn_" + treeNode.catalogid).length > 0)
    return;
    var addStr = "<span class='button add' id='addBtn_" + treeNode.catalogid
    + "' title='添加節點' onfocus='this.blur();'></span>";
    sObj.after(addStr);
    var btn = $("#addBtn_"+treeNode.catalogid);
    if(btn)btn.bind("click",function(){
     var level = treeNode.level;
          jQuery.ajax({
                 type:"POST",
                 url:add.action",
                 dataType:"json",  
                 data:{'parentid':treeNode.catalogid,'chname':encodeURIComponent($("#doAddForm input[id='esResourceCatalog.chname']").val())},
                 success:function(data)
                 {
                     if(data.result == 'SUCCESS')
                     {
                        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                        zTree.addNodes(treeNode, {catalogid:data.newId , parentid: treeNode.catalogid, chname:data.chname});
                     }
                     else
                     {
                      $.DialogAlert('tips',data.result);
                       return false;
                  }
                 }
               });
   };

4.對不同節點定義增刪改按鈕的顯示與否
edit: {
//給節點額外增加屬性來控制“重命名”、“刪除”圖標的顯示或隱藏
showRenameBtn:showRenameBtn,
},
然後寫showRenameBtn方法。

5.treeNode的節點可以任意添加自己使用的字段，比如說flag等

6.ztree修改節點名稱，點擊頁面就會提示信息的問題,彈出一次就不讓再彈了即可。

7.判斷當前層數： treeNode.level; 根節點 level = 0，依次遞增

 查看當前被選中的節點的級數

var treeObj = $.fn.zTree.getZTreeObj("tree");
var sNodes = treeObj.getSelectedNodes();
if (sNodes.length > 0) {
var level = sNodes[0].level;
}