ztree的添加、修改、删除及前后台交互

一、引入资源
下载并引入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 = "";
 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     }