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

 // 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='添加节点' οnfοcus='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++);
             var newNode;
             //发送请求保存一个新建的节点，后台返回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;
                         //在树节点上增加节点
                         newNode = zTree.addNodes(treeNode, {id: newId, pId: treeNode.id, name: name});
                         zTree.editName(newNode[0]) //新增的节点进入编辑状态
                     }
                 }
             });
             return false;
         });
     }

添加新的根节点
流程与上述方法类似，只是在树节点之外增加一个新增根节点按钮，并添加上对应的方法

 //添加根节点
     $('.addnode').click(function () {
         var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
             nodes = zTree.getNodes();
             console.log(nodes)

         var name = "新部门" + (newCount++);
         var newNode;
         //发送请求保存一个新建的节点，根据返回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;
                     newNode = zTree.addNodes(null, {id: newId, pId: null, name: name});
                     zTree.editName(newNode[0]);  //新增后显示编辑状态
                 }
             }
         });
     });

修改

重命名修改
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获取对应信息或进行对应的操作
     }