简介:
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 = "";
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;
}