美文网首页
ztree 新增节点动能拓展(节点名称不能为空及不能重复命名)

ztree 新增节点动能拓展(节点名称不能为空及不能重复命名)

作者: 羊绘霖 | 来源:发表于2019-04-17 10:10 被阅读0次

    html

    <ul id="treeDemo" class="ztree"></ul>

    js

    // 新建删除收藏夹(ztree配置)

            var setting = {

                view: {

                    addHoverDom: addHoverDom,

                    removeHoverDom: removeHoverDom,

                    selectedMulti: false

                },

                edit: {

                    enable: true,

                    editNameSelectAll: true,

                    renameTitle: "编辑名称",

                    removeTitle: "删除文件夹",

                    addNodesTitle: "新建文件夹",

                    showRemoveBtn: showRemoveBtn,

                    showRenameBtn: true

                },

                data: {

                    simpleData: {

                        enable: true

                    }

                },

                callback: {

                    beforeDrag: beforeDrag,

                    beforeEditName: beforeEditName,

                    beforeRemove: beforeRemove,

                    beforeRename: beforeRename,

                    onRemove: onRemove,

                    onRename: onRename

                }

            };

            var zNodes =[

                { id:1, pId:0, name:"我的收藏", open:true},

                { id:11, pId:1, name:"叶子节点 1-1"},

                { id:12, pId:1, name:"叶子节点 1-2"},

                { id:13, pId:1, name:"叶子节点 1-3"},

                { id:2, pId:0, name:"他人分享", open:true},

                { id:21, pId:2, name:"叶子节点 2-1"},

                { id:22, pId:2, name:"叶子节点 2-2"},

                { id:23, pId:2, name:"叶子节点 2-3"}

            ];

            function beforeDrag(treeId, treeNodes) {

                return false;

            }

            // 编辑名称

            function beforeEditName(treeId, treeNode) {

                var zTree = $.fn.zTree.getZTreeObj("treeDemo");

                zTree.selectNode(treeNode);

                setTimeout(function() {

                    zTree.editName(treeNode);

                }, 0);

                return false;

            }

            // 删除节点

            function beforeRemove(treeId, treeNode) {

                var zTree = $.fn.zTree.getZTreeObj("treeDemo");

                zTree.selectNode(treeNode);

            }

            function onRemove(e, treeId, treeNode) {

            }

            // 编辑节点

            function beforeRename(treeId, treeNode, newName, isCancel) {

                var zTree=$.fn.zTree.getZTreeObj("treeDemo")

                    node=zTree.getNodes(),

                    nodes = zTree.transformToArray(node);

                if (newName.length == 0) {

                    setTimeout(function() {

                        var zTree = $.fn.zTree.getZTreeObj("treeDemo");

                        zTree.cancelEditName();

                        alert("节点名称不能为空.");

                    }, 0);

                    return false;

                }

                for (var n in nodes) {

                    if (nodes[n].name == newName) {

                        if (nodes[n].id == treeNode.id) return;

                        setTimeout(function () {

                            var zTree = $.fn.zTree.getZTreeObj("treeDemo");

                            zTree.cancelEditName();

                            alert("文件夹名称已存在!");

                        }, 200)

                        return false;

                    }

                }

                return true;

            }

            function onRename(e, treeId, treeNode, isCancel) {

                var arr = [];

                arr.push(treeNode.name);

            }

            function showRemoveBtn(treeId, treeNode) {

                // 二级文件夹显示删除

                return treeNode.level === 1;

            }

            var newCount = 1;

            function addHoverDom(treeId, treeNode) {

                // 一级文件夹显示新建

                if(treeNode.level === 0) {

                    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='新建文件夹' onfocus='this.blur();'></span>";

                    sObj.after(addStr);

                    var btn = $("#addBtn_"+treeNode.tId);

                    if (btn) btn.bind("click", function(){

                        var zTree = $.fn.zTree.getZTreeObj("treeDemo");

                        zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"新建文件夹" + (newCount++)});

                        return false;

                    });

                };

            };

            function removeHoverDom(treeId, treeNode) {

                $("#addBtn_"+treeNode.tId).unbind().remove();

            };

            function selectAll() {

                var zTree = $.fn.zTree.getZTreeObj("treeDemo");

                zTree.setting.edit.editNameSelectAll =  $("#selectAll").attr("checked");

            }

            $(document).ready(function(){

                $.fn.zTree.init($("#treeDemo"), setting, zNodes);

                $("#selectAll").bind("click", selectAll);

            });

    相关文章

      网友评论

          本文标题:ztree 新增节点动能拓展(节点名称不能为空及不能重复命名)

          本文链接:https://www.haomeiwen.com/subject/aergwqtx.html