一、引入资源
下载并引入ztree的相关js,css和img等。http://www.treejs.cn/v3/api.php
ztree的核心代码jquery.ztree.core.js
ztree关于选中的代码jquery.ztree.excheck.js(如果有复选框引入)
ztree关于是否可编辑的代码jquery.exedit.js(允许修改节点时引入)
二、初始化ztree
1、页面中创建tree需要显示的载体dom
2、设置ztree的基本配置参数 setting
// zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
var setting = {
//是否允许编辑节点
edit: {
enable: true,
editNameSelectAll: true,
showRemoveBtn: true,
removeTitle: "删除节点",
showRenameBtn: true,
renameTitle: "编辑节点"
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeRemove: beforeRemove, //移除前
beforeRename: beforeRename, //重命名前
//onRemove: onRemove,
onRename: onRename,
beforeDrag:beforeDrag,
onClick: zTreeOnClick //注册节点的点击事件
},
view: {
selectedMulti: false,
addHoverDom: addHoverDom, //移入节点显示编辑按钮
removeHoverDom: removeHoverDom //移入节点显示编辑按钮
},
};
3、获取节点初始数据,并初始化ztree
ztree支持的数据结构,可查看官网文档。
//获取部门tree数据
function loadTree() {
$.ajax({
type: 'POST',
contentType: '',
url: "",
data: {},
timeout: 1000, //超时时间设置,单位毫秒
dataType: 'json',
success: function (res) {
zNodes = []; //初始化ztree
for (var i = 0; i < res.length; i++) {
var data = res[i]
zNodes.push({
'id': data.id,
'pId': data.pId,
'name': data.name,
'open': false
});
}
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); //初始化ztree
}
})
}
$(document).ready(function () {
loadTree();
});
三、配置增删改方法
添加:
在节点下添加新节点信息
1、首先在setting的callback中,设置addHoverDom方法,鼠标移入节点时,显示编辑按钮;在setting的edit中也需要设置显示编辑按钮。
2、
//鼠标移入节点,显示编辑按钮
function addHoverDom(treeId, treeNode) { //treeNode是当前hover的节点信息
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);
//判断该部门下是否有人员,用于删除节点时,当节点下有信息,禁止删除。
var data1 = {
"id": treeNode.id,
"pageNumber": currentPageNumber,
"pageSize": currentPageSize
};
$.ajax({
type: 'POST',
url: "",
data: data1,
timeout: 1000, //超时时间设置,单位毫秒
dataType: 'json',
success: function (res) {
//console.log(res);
if(res.flag == 0){
var datalist = res.data.list;
if(datalist.length==0){
hasMember = false;
}else{
hasMember = true;
}
}
}
});
//当点击添加按钮时:
if (btn) btn.bind("click", function () {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
console.log(treeNode.id);
var name = "新部门" + (newCount++);
//发送请求保存一个新建的节点,后台返回ID,用返回的ID新增节点
var data = {
"code": treeNode.id,
"name": name
};
$.ajax({
type: 'post',
url: "",
data: data,
timeout: 1000, //超时时间设置,单位毫秒
dataType: 'json',
success: function (res) {
console.log(res)
if (res.flag == 0 ) {
var newId = res.data;
//在树节点上增加节点
zTree.addNodes(treeNode, {id: newId, pId: treeNode.id, name: name});
}
}
});
return false;
});
}
添加新的根节点
流程与上述方法类似,只是在树节点之外增加一个新增根节点按钮,并添加上对应的方法
//添加根节点
$('.addnode').click(function () {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getNodes();
console.log(nodes)
var name = "新部门" + (newCount++);
//发送请求保存一个新建的节点,根据返回ID添加新节点
var data = {
"code": 0,
"name": name
};
$.ajax({
type: 'post',
url: "",
data: data,
timeout: 1000, //超时时间设置,单位毫秒
dataType: 'json',
success: function (res) {
console.log(res)
if (res.flag == 0) {
var newId = res.data;
zTree.addNodes(null, {id: newId, pId: null, name: name});
}
}
});
});
修改
重命名修改
1、重命名之前的判空,在beforeRename函数中判断
//重命名之前的判断
function beforeRename(treeId, treeNode, newName) {
if (newName.length == 0) {
layer.msg("节点名称不能为空.");
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
setTimeout(function () {
zTree.editName(treeNode)
}, 10);
return false;
}
return true;
}
2、重命名的前后台交互
//修改节点信息
function onRename(event, treeId, treeNode, isCancel) {
if (isCancel) {
return;
}
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var onodes = zTree.getNodes()
console.log(onodes);
//发送请求修改节点信息
var data = {
"id": treeNode.id,
"code": treeNode.pId, //父节点
"name": treeNode.name,
};
$.ajax({
type: 'post',
url: "",
data: data,
timeout: 1000, //超时时间设置,单位毫秒
dataType: 'json',
success: function (res) {
layer.msg(res.msg)
}
});
}
删除
需求:
删除前需要二次确认;
当节点下有子节点时,禁止删除改节点;
当节点下有对应的其他信息时,禁止删除;
//删除之前的判断
function beforeRemove(treeId, treeNode) {
var data = {
"id": treeNode.id
};
className = (className === "dark" ? "" : "dark");
if(treeNode.isParent){
layer.alert('该节点下有子节点,不能删除');
return false;
}
if(hasMember){
layer.alert('该部门下有人员,不能删除');
return false;
}
var oFlag = confirm("确认删除 节点 -- " + treeNode.name + " 吗?");
if(oFlag){
$.ajax({
type: 'post',
url: "",
data: data,
timeout: 1000, //超时时间设置,单位毫秒
dataType: 'json',
success: function (res) {
console.log(res)
if (res.flag == 0) {
layer.msg(res.msg)
return true;
}else {
layer.msg(res.msg);
return false;
}
}
})
}else{
return false
}
}
其他
鼠标移出时,隐藏编辑按钮
function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.tId).unbind().remove();
};
禁止节点之前的拖拽
function beforeDrag(){
return false; //禁止所有拖拽功能
}
点击节点的事件
//当点击节点
function zTreeOnClick(event, treeId, treeNode) {
//alert(treeNode.tId + ", " + treeNode.name);
//这里根据节点ID获取对应信息或进行对应的操作
}