一、引入资源
下载并引入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
1 // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
2 var setting = {
3 //是否允许编辑节点
4 edit: {
5 enable: true,
6 editNameSelectAll: true,
7 showRemoveBtn: true,
8 removeTitle: "删除节点",
9 showRenameBtn: true,
10 renameTitle: "编辑节点"
11 },
12 data: {
13 simpleData: {
14 enable: true
15 }
16 },
17 callback: {
18 beforeRemove: beforeRemove, //移除前
19 beforeRename: beforeRename, //重命名前
20 //onRemove: onRemove,
21 onRename: onRename,
22 beforeDrag:beforeDrag,
23 onClick: zTreeOnClick //注册节点的点击事件
24 },
25 view: {
26 selectedMulti: false,
27 addHoverDom: addHoverDom, //移入节点显示编辑按钮
28 removeHoverDom: removeHoverDom //移入节点显示编辑按钮
29 },
30 };
3、获取节点初始数据，并初始化ztree
ztree支持的数据结构，可查看官网文档。
1 //获取部门tree数据
2 function loadTree() {
3 $.ajax({
4 type: 'POST',
5 contentType: '',
6 url: "",
7 data: {},
8 timeout: 1000, //超时时间设置，单位毫秒
9 dataType: 'json',
10 success: function (res) {
11 zNodes = []; //初始化ztree
12 for (var i = 0; i < res.length; i++) {
13 var data = res[i]
14 zNodes.push({
15 'id': data.id,
16 'pId': data.pId,
17 'name': data.name,
18 'open': false
19 });
20 }
21 zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); //初始化ztree
22 }
23 })
24
25 }
26
27 $(document).ready(function () {
28 loadTree()
29 });
三、配置增删改方法
添加：
在节点下添加新节点信息
1、首先在setting的callback中，设置addHoverDom方法，鼠标移入节点时，显示编辑按钮；在setting的edit中也需要设置显示编辑按钮。
2、
1 //鼠标移入节点，显示编辑按钮
2 function addHoverDom(treeId, treeNode) { //treeNode是当前hover的节点信息
3 var sObj = $("#" + treeNode.tId + "_span");
4 if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
5 var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
6 + "' title='添加节点' οnfοcus='this.blur();'></span>";
7 sObj.after(addStr);
8 var btn = $("#addBtn_" + treeNode.tId);
9
10 //判断该部门下是否有人员，用于删除节点时，当节点下有信息，禁止删除。
11 var data1 = {
12 "id": treeNode.id,
13 "pageNumber": currentPageNumber,
14 "pageSize": currentPageSize
15 };
16 $.ajax({
17 type: 'POST',
18 url: "",
19 data: data1,
20 timeout: 1000, //超时时间设置，单位毫秒
21 dataType: 'json',
22 success: function (res) {
23 //console.log(res);
24 if(res.flag == 0){
25 var datalist = res.data.list;
26 if(datalist.length==0){
27 hasMember = false;
28 }else{
29 hasMember = true;
30 }
31 }
32
33 }
34 });
35 //当点击添加按钮时：
36 if (btn) btn.bind("click", function () {
37 var zTree = $.fn.zTree.getZTreeObj("treeDemo");
38 console.log(treeNode.id);
39 var name = "新部门" + (newCount++);
40 var newNode;
41 //发送请求保存一个新建的节点，后台返回ID，用返回的ID新增节点
42 var data = {
43 "code": treeNode.id,
44 "name": name
45 };
46 $.ajax({
47 type: 'post',
48 url: "",
49 data: data,
50 timeout: 1000, //超时时间设置，单位毫秒
51 dataType: 'json',
52 success: function (res) {
53 console.log(res)
54 if (res.flag == 0 ) {
55 var newId = res.data;
56 //在树节点上增加节点
57 newNode = zTree.addNodes(treeNode, {id: newId, pId: treeNode.id, name: name});
58 zTree.editName(newNode[0]) //新增的节点进入编辑状态
59 }
60 }
61 });
62 return false;
63 });
64 }
添加新的根节点
流程与上述方法类似，只是在树节点之外增加一个新增根节点按钮，并添加上对应的方法
1 //添加根节点
2 $('.addnode').click(function () {
3 var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
4 nodes = zTree.getNodes();
5 console.log(nodes)
6
7 var name = "新部门" + (newCount++);
8 var newNode;
9 //发送请求保存一个新建的节点，根据返回ID添加新节点
10 var data = {
11 "code": 0,
12 "name": name
13 };
14 $.ajax({
15 type: 'post',
16 url: "",
17 data: data,
18 timeout: 1000, //超时时间设置，单位毫秒
19 dataType: 'json',
20 success: function (res) {
21 console.log(res)
22 if (res.flag == 0) {
23 var newId = res.data;
24 newNode = zTree.addNodes(null, {id: newId, pId: null, name: name});
25 zTree.editName(newNode[0]); //新增后显示编辑状态
26 }
27 }
28 });
29 });
修改
重命名修改
1、重命名之前的判空，在beforeRename函数中判断
1 //重命名之前的判断
2 function beforeRename(treeId, treeNode, newName) {
3 if (newName.length == 0) {
4 layer.msg("节点名称不能为空.");
5 var zTree = $.fn.zTree.getZTreeObj("treeDemo");
6 setTimeout(function () {
7 zTree.editName(treeNode)
8 }, 10);
9 return false;
10 }
11 return true;
12 }
2、重命名的前后台交互
1 //修改节点信息
2 function onRename(event, treeId, treeNode, isCancel) {
3 if (isCancel) {
4 return;
5 }
6 var zTree = $.fn.zTree.getZTreeObj("treeDemo");
7 var onodes = zTree.getNodes()
8 console.log(onodes);
9 //发送请求修改节点信息
10 var data = {
11 "id": treeNode.id,
12 "code": treeNode.pId, //父节点
13 "name": treeNode.name,
14 };
15 $.ajax({
16 type: 'post',
17 url: "",
18 data: data,
19 timeout: 1000, //超时时间设置，单位毫秒
20 dataType: 'json',
21 success: function (res) {
22 layer.msg(res.msg)
23 }
24 });
25 }
删除
需求：
删除前需要二次确认；
当节点下有子节点时，禁止删除改节点；
当节点下有对应的其他信息时，禁止删除；
1 //删除之前的判断
2 function beforeRemove(treeId, treeNode) {
3 var data = {
4 "id": treeNode.id
5 };
6 className = (className === "dark" ? "" : "dark");
7
8 if(treeNode.isParent){
9 layer.alert('该节点下有子节点，不能删除');
10 return false;
11 }
12
13 if(hasMember){
14 layer.alert('该部门下有人员，不能删除');
15 return false;
16 }
17 var oFlag = confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
18 if(oFlag){
19 $.ajax({
20 type: 'post',
21 url: "",
22 data: data,
23 timeout: 1000, //超时时间设置，单位毫秒
24 dataType: 'json',
25 success: function (res) {
26 console.log(res)
27 if (res.flag == 0) {
28 layer.msg(res.msg)
29 return true;
30 }else {
31 layer.msg(res.msg);
32 return false;
33 }
34 }
35 })
36 }else{
37 return false
38 }
39 }
其他
鼠标移出时，隐藏编辑按钮
1 function removeHoverDom(treeId, treeNode) {
2 $("#addBtn_" + treeNode.tId).unbind().remove();
3 };
禁止节点之前的拖拽
1 function beforeDrag(){
2 return false; //禁止所有拖拽功能
3 }
点击节点的事件
1 //当点击节点
2 function zTreeOnClick(event, treeId, treeNode) {
3 //alert(treeNode.tId + ", " + treeNode.name);
4 //这里根据节点ID获取对应信息或进行对应的操作
5 }
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
