整合ztree的一些功能和demo演示
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官网下载。
--------------------- 本文来自 黄爱岗 的**** 博客 ,全文地址请点击:https://blog.****.net/huangaigang6688/article/details/27237119?utm_source=copy