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='添加节点' οnfοcus='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;
}