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