ztree官网上有详细的API和演示demo，这里就不详细介绍了，只对用到的一些功能进行说明一下。
1、用到的几个js文件
jquery-1.4.4.min.js（jQuery的核心js）
jquery.ztree.core-3.5.js（ztree的核心js）
jquery.ztree.excheck-3.5.js（ztree的复选框功能js）
jquery.ztree.exedit-3.5.js（ztree的编辑功能js）
2、用的css文件
zTreeStyle.css（只有这一个css文件，控制ztree样式，当然可以在这个文件里扩展自己需要的样式）
3、用到的图片
zTree v3.x 将主要图标都合并为一个图片，利用图片切割方式显示图标
4、数据定义
use the simple data format（{"id":1, "pId":0, "name":"test1"}）
5、页面demo代码如下：
<link rel="stylesheet" href="css/zTreeStyle.css" />
<script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="js/jquery.ztree.exedit-3.5.js"></script>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<SCRIPT type="text/javascript">
var dragId;var zTree_Menu;
var setting = {
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false,
showLine: false,
selectedMulti: false,
showIcon: false
},
edit: {
enable: true,
showRemoveBtn: setRemoveBtn,
removeTitle:"删除分类",
renameTitle:"编辑分类",
drag: {
prev: true,
next: true,
inner: false
},
editNameSelectAll: true
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeDrag: beforeDrag,
beforeClick: beforeClick,
beforeEditName: beforeEditName,
beforeRemove: beforeRemove,
beforeRename: beforeRename,
onRemove: onRemove,
onRename: onRename,
beforeDrop: beforeDrop
}
};
//采用简单数据模式 (Array)
var zNodes =[
{ id:1, pId:0, name:"拖拽 1"},
{ id:11, pId:1, name:"拖拽 1-1"},
{ id:111, pId:11, name:"拖拽 1-1-1"},
{ id:12, pId:1, name:"拖拽 1-2"},
{ id:121, pId:12, name:"拖拽 1-2-1"},
{ id:122, pId:12, name:"拖拽 1-2-2"},
{ id:1221, pId:121, name:"拖拽 1-2-2-1"},
{ id:123, pId:12, name:"拖拽 1-2-3"},
{ id:1231, pId:123, name:"拖拽 1-2-3-1"},
{ id:1232, pId:123, name:"拖拽 1-2-3-2"},
{ id:1233, pId:123, name:"拖拽 1-2-3-3"},
{ id:2, pId:0, name:"拖拽 2"},
{ id:21, pId:2, name:"拖拽 2-1"},
{ id:22, pId:2, name:"拖拽 2-2"},
{ id:23, pId:2, name:"拖拽 2-3"},
{ id:3, pId:0, name:"拖拽 3"},
{ id:31, pId:3, name:"拖拽 3-1"},
{ id:32, pId:3, name:"拖拽 3-2"},
{ id:33, pId:3, name:"拖拽 3-3"}
];
function beforeDrag(treeId, treeNodes) {//用于捕获节点被拖拽之前的事件回调函数
return false;
}
function beforeEditName(treeId, treeNode) {//用于捕获节点编辑按钮的 click 事件，并且根据返回值确定是否允许进入名称编辑状态
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
return true;
}
function beforeRemove(treeId, treeNode) {//用于捕获节点被删除之前的事件回调函数，并且根据返回值确定是否允许删除操作
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
return confirm("确认删除 分类 -- " + treeNode.name + " 吗？");
}
function onRemove(e, treeId, treeNode) {//用于捕获删除节点之后的事件回调函数
}
function beforeRename(treeId, treeNode, newName) {//更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作
if (newName.length == 0) {
alert("分类名称不能为空.");
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
setTimeout(function(){zTree.editName(treeNode)}, 10);
return false;
}
return true;
}
function onRename(e, treeId, treeNode) {//用于捕获节点编辑名称结束之后的事件回调函数
}
var newCount = 1;
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(){
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
return false;
});
}
function setRemoveBtn(treeId, treeNode) {//父分类去掉删除功能
return !treeNode.isParent;
<span style="white-space:pre"> </span>}
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
};
function beforeDrag(treeId, treeNodes) {//拖拽时执行
for (var i=0,l=treeNodes.length; i<l; i++) {
dragId = treeNodes[i].pId;
if (treeNodes[i].drag === false) {
return false;
}
}
return true;
}
function beforeDrop(treeId, treeNodes, targetNode, moveType) {//拖拽释放后执行
if(targetNode.pId == dragId){
return true;
}else{
return false;
}
}
function selectAll() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.setting.edit.editNameSelectAll = $("#selectAll").attr("checked");
};
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);//初始化ztree
zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
$("#selectAll").bind("click", selectAll);
});
</SCRIPT>
</head>
<body>
<div class="widget-box">
<div class="widget-title"> <span class="icon"> <i class="icon-th"></i> </span>
<h5>分类管理</h5>
</div>
<div class="widget-content tab-content" >
<!--分类管理开始-->
<div class="content_wrap" >
<div class="zTreeDemoBackground ">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
<!--分类管理结束-->
</div>
</div>
</body>
</html>
以上代码可以直接运行，不过需要下载相关js、css和图片，可以直接到ztree官网下载。
--------------------- 本文来自 黄爱岗 的CSDN 博客 ，全文地址请点击：/huangaigang6688/article/details/27237119?utm_source=copy
