zTree可 添加，编辑，删除，移动 节点

可编辑移动删除的zTree
· js 需要引入 all.js 或者 后面的三个js（别忘了css样式文件）

效果就是下面的树，可以对节点进行    移动（拖动）、添加子节点、编辑、删除

配置内容：

1.至今不明白的一个点，用ajax异步获取节点然后设置节点，好多ztree的好多回调函数会失效。这种方法初始化才行。

2.加载完成后展开一级节点

· 控制 添加编辑删除 按钮的是否显示

可根据这几个方法（方法在callBack中定义）的返回值（true、false）控制是否显示  添加、编辑、删除 三个按钮，这几个方法可在配置文件中找到

· 拖动节点

.控制拖动的时候禁止拖动节点为根节点，也是根据返回值的true false 控制（条件根据自己实际的业务需求定，下图的same条  件是我自己根据业务需求定义的）（方法在callBack中定义）

.拖动完成后可与后台进行数据交互（方法在callBack中定义）

· 删除节点

删除节点的时候ztree自带的弹窗很不友好，下面是我自己写的（删除节点需要两个方法，beforeRemove是ztree在样式上删除这个节点，删除完之后后通过zTreeOnRemove与后台进行数据交互，真正删除数据）

· 重命名节点

.和删除拖动一样，可根据自定义的条件控制是否允许重命名，然后直接与后台进行数据交互

.

下面贴代码

下面的 flag bs ids 都是业务系统的参数属性，如果你需要复制这段代码，请把涉及到这些参数的代码做一下删除或者替换成你自己业务系统的逻辑。

<script type="text/javascript">
    var newCount = 1;   //这个属性是ztree添加节点的时候命名的依据（new node1、new node2）
    /***过滤条件****/
    function filter(node) {
        return (node.level == 0);
    }

    /*** 禁止拖动成为根节点 ****/
    function zTreeBeforeDrop(treeId, treeNodes, targetNode, moveType) {
        return !(targetNode == null || (moveType != "inner" && !targetNode.parentTId));;
    };

    /******捕获异步加载正常结束,展开一级节点*******/
    function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = treeObj.getNodesByFilter(filter); // 查找节点集合
        if(nodes.length>0){
            for(var i in nodes){
                treeObj.expandNode(nodes[i], true);
            }
        }
    };

    var setting = {
        treeId: "treeDemo",
        async: {
            enable: true,
            url: "${ctxPath}/ucRole/treeData",
            autoParam: ["id"]
        },
        callback: {
            onAsyncSuccess: zTreeOnAsyncSuccess,        //用于捕获异步加载正常结束的事件回调函数
            beforeRemove: beforeRemove,                 //用于捕获节点被删除之前的事件回调函数，并且根据返回值确定是否允许删除操作
            //用于捕获节点编辑名称结束（Input 失去焦点 或 按下 Enter 键）之后，更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作
            beforeRename: beforeRename,
            onRemove: zTreeOnRemove,                    //用于捕获删除节点之后的事件回调函数。
            beforeDrop: zTreeBeforeDrop,                //用于捕获节点拖拽操作结束之前的事件回调函数，并且根据返回值确定是否允许此拖拽操作
            onDrop: zTreeOnDrop,                        //用于捕获节点拖拽操作结束的事件回调函数
            onClick: zTreeOnClick                       //用于捕获节点被点击的事件回调函数
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pid"
            }
        },
        edit: {
            enable: true,
            editNameSelectAll: false,       //节点编辑名称 input 初次显示时,设置 txt 内容是否为全选状态
            removeTitle: "删除",
            renameTitle: "编辑",
            showRemoveBtn: showRemoveBtn,   //可根据实际业务需求控制是否显示 删除 按钮（方法返回true/false）
            showRenameBtn: showRenameBtn,   //可根据实际业务需求控制是否显示 编辑 按钮（方法返回true/false）
            drag: {
                autoExpandTrigger: true,    //拖拽时父节点自动展开是否触发 onExpand 事件回调函数
                isCopy: false,             //拖拽时, 设置是否允许复制节点  默认值：true
                isMove: false,              //拖拽时, 设置是否允许移动节点
                prev: true,                 //设置是否允许移动到目标节点前面的操作
                next: true,                 //设置是否允许移动到目标节点后面的操作
                inner: true,                //设置是否允许成为目标节点的子节点
                borderMax: 20,              //拖拽节点成为根节点时的 Tree 内边界范围 (单位：px)
                borderMin: -10,             //拖拽节点成为根节点时的 Tree 外边界范围 (单位：px)
                minMoveSize: 5,             //判定是否拖拽操作的最小位移值 (单位：px)
                maxShowNodeNum: 5,          //拖拽多个兄弟节点时，浮动图层中显示的最大节点数  多余的节点用...代替
                autoOpenTime: 0             //拖拽时父节点自动展开的延时间隔

            }
        },
        view: {
            addHoverDom: addHoverDom,               //鼠标滑过显示添加按钮
            removeHoverDom: removeHoverDom,         //鼠标滑过移除添加按钮
            dblClickExpand: true,
            txtSelectedEnable: true,
            showIcon: true,
            showLine: true,
            showTitle: true
        }
    }

    /***是否显示删除按钮**/（flag是我后台自定义的节点属性，不是ztree的节点属性，可根据自己的业务自己定义其他条件）
    function showRemoveBtn(treeId, treeNode) {
        if(treeNode.flag!='1' && treeNode.level != 0){
           return true;
        }else{
            return false;
        }
    }
    /***是否显示编辑按钮**/（flag是我后台自定义的节点属性，不是ztree的节点属性，可根据自己的业务自己定义其他条件）
    function showRenameBtn(treeId, treeNode) {
        if(treeNode.flag!='1' && treeNode.level != 0){
            return true;
        }else{
            return false;
        }
    }

   //鼠标滑过取消显示添加按钮
    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_" + treeNode.tId).unbind().remove();
    };

    /** 鼠标悬浮显示添加按钮 可根据实际业务判断是否显示添加按钮 flag是我后台自定义的节点属性，不是ztree的节点属性*/
    function addHoverDom(treeId, treeNode) {
        if(treeNode.flag != '1'){
            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='add node' οnfοcus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_" + treeNode.tId);
            if (btn) btn.bind("click", function () {
                addNodes(treeNode);
                return false;
            });
        }
    };

    /***** 添加节点 直接与后台进行数据交互保存数据*****/
    function addNodes(treeNode) {
        if(treeNode.flag == '1'){
            layer.msg("基础角色不允许新添加节点!",{icon:2});
            return false;
        }
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
       //这个方法是ztree添加节点的方法
        zTree.addNodes(treeNode, {id: (100 + newCount), pId: treeNode.id, name: name});
        var name = "new node" + (newCount++);   //名称
        var parentRoleId = treeNode.id;
        var param = {name: name, parentRoleId: parentRoleId};
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        $.ajax({
            url: "/ucRole/add",
            type: "post",
            dataType: "json",
            async: true,
            data: param,
            success: function (data) {
                if (data.code == 200) {
                    layer.msg("添加成功!", {icon: 1});
                    var node = treeObj.getNodeByTId(treeNode.tId);
                    treeObj.reAsyncChildNodes(node, "refresh");
                }
            },
            error: function () {
                layer.msg("系统异常", {icon: 2})
            }
        })
    }

    /*** 重命名 可根据业务需求控制能否进行重命名，可直接与后台进行数据交互**/
    function beforeRename(treeId, treeNode, newName) {
        if(treeNode.flag == '1'){
                layer.msg("基础角色不允许编辑!",{icon:2});
                return false;
            }
        if (newName.length == 0) {
            setTimeout(function () {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.cancelEditName();
                alert("节点名称不能为空.");
            }, 0);
            return;
        }
        var id = treeNode.ids;
        var param = {name: newName.trim(),id: id};
        $.ajax({
            url: "/ucRole/update",
            type: "post",
            dataType: "json",
            async: true,
            data: param,
            success: function (data) {
                if (data.code == 200) {
                    layer.msg("编辑成功!", {icon: 1});
                    $("#name").val(newName);
                }
            },
            error: function () {
                layer.msg("系统异常", {icon: 2})
            }
        })
        return true;
    }
   
    //ztree删除节点成功后（样式上删除，实际没有走后台删除数据）走这个方法，与后台交互删除数据
    function zTreeOnRemove(treeNode) {
        var id = treeNode.ids;
        $.ajax({
            url: "/ucRole/delete",
            type: "post",
            dataType: "json",
            async: true,
            data: {ucRoleId:id},
            success: function (data) {
                if (data.code == 200) {
                    layer.msg("已删除!", {icon: 1});
                    var ids = $("#id").val();
                    if(id == ids){
                        $("#info").css('display',"none");
                    }
                }
            },
            error: function (data) {
                layer.msg("系统异常", {icon: 2})
            }
        })
    }

   //ztree删除节点之前判断是否允许删除节点（这个方法做了一些修改，因为ztree自带的弹窗不是很美观好用）
    function beforeRemove(treeId, treeNode) {
        if(treeNode.level == '0'){
            layer.msg("根节点不能删除!",{icon:2});
            return false;
        }
        layer.confirm("确认删除"+treeNode.name+"吗?", {
            btn: ['确定','取消'] //按钮
        }, function(){
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.removeNode(treeNode);
            zTreeOnRemove(treeNode);
            layer.closeAll()
        })
        return false;
    }
   
   //拖动节点成功后与后台进行数据交互的方法
    function zTreeOnDrop(event, treeId, treeNodes) {
        if(treeNodes[0].level == '0'){
            layer.msg("根节点不能移动!",{icon:2});
            return false;
        }
        var node = treeNodes[0];
        var id = node.ids;                 //id
        var param = {id: id};
        $.ajax({
            url: "/ucRole/update",
            type: "post",
            dataType: "json",
            async: true,
            data: param,
            success: function (data) {
                if (data.code == 200) {
                    layer.msg("移动成功!", {icon: 1});
                }
            },
            error: function () {
                layer.msg("系统异常", {icon: 2})
            }
        })
    };

    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"),setting);
    });

    //点击节点触发的方法，可以在里面写自己的业务逻辑（比如说数据的展示）
    function zTreeOnClick(event, treeId, treeNode) {
        
        
    };
</script>