zTree v3.2 API 文档==>点击进入
所有demo展示地址==>点击进入
新增-编辑-删除demo==>点击进入

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="./css/zTreeStyle.css">
    <link rel="stylesheet" type="text/css" href="./css/demo.css">
    <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="./js/jquery-migrate-1.2.1.js" type="text/javascript"></script>
    <script src="./js/jquery.ztree.all-3.5.min.js"
        type="text/javascript"></script>
    <script src="./js/jquery.ztree.exhide-3.5.min.js"
        type="text/javascript"></script>
    <script src="./js/MtrSearchZTree.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
    <script src="https://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
    <script src="https://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <style>
        .ztree li span.button.add {
            margin-left: 2px;
            margin-right: -1px;
            background-position: -144px 0;
            vertical-align: top;
            *vertical-align: middle
        }
        .treeBox{
            display: inline-block;
            min-width: 220px;
        }
        #treeDemoKeyword{
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="row" style="margin: 50px;">
        <div class="treeBox">
            <ul id="treeDemo" class="ztree">
            </ul>
        </div>
    </div>

    <script>
        var setting = {
            async: {
                enable: true,
                url: "http://127.0.0.1:8080/getData.json",
                type: 'get',
                dataFilter: filter
            },
            view: {
                expandSpeed: "",
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
                selectedMulti: false,
                showIcon: false
            },
            edit: {
                enable: true,
                renameTitle: "编辑",
                removeTitle: "删除"
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                }
            },
            callback: {
                beforeRemove: beforeRemove,
                beforeRename: beforeRename
            }
        };

        var treeData

        function filter(treeId, parentNode, childNodes) {
            if (!childNodes) return null;
            for (var i = 0, l = childNodes.length; i < l; i++) {
                childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
            }
            setLevel(childNodes)
            treeData = childNodes
            return childNodes;
        }

        // 给数据设置层级
        function setLevel(childNodes, level=0){
            for(var i = 0; i < childNodes.length; i++){
                if(!childNodes[i].children){
                    childNodes[i].level = level
                } else {
                    childNodes[i].level = level
                    setLevel(childNodes[i].children, level+1)
                }
            }
        }

        // 删除的事件
        function beforeRemove(treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.selectNode(treeNode);
            if(confirm("确认删除 节点 -- " + treeNode.name + " 吗?")){
                deleteTreeData(treeData, treeNode)
            console.log('treeData:', treeData)
            }
            return ;
        }

        // 编辑后的事件
        function beforeRename(treeId, treeNode, newName) {
            if (newName.length == 0) {
                setTimeout(function () {
                    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                    zTree.cancelEditName();
                    alert("节点名称不能为空.");
                }, 0);
                return false;
            }
            editTreeData(treeData, treeNode, newName)
            console.log('treeData:', treeData)
            return true;
        }

        var newCount = 1;
        // hover事件
        function addHoverDom(treeId, treeNode) {
            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");
                var newName = "new node" + (newCount++)
                zTree.addNodes(treeNode, { id: (100 + newCount), pId: treeNode.id, name: newName});
                addTreeData(treeData, treeNode, newName)
                console.log('treeData:', treeData)
                return false;
            });
        };

        // 编辑-改变源数据
        function editTreeData(arr, treeNode, newName){
            for(let i = 0; i < arr.length; i++) {
                if(arr[i].id === treeNode.id || (arr[i].level === treeNode.level && arr[i].name === treeNode.name)){
                    arr[i].name = newName
                    return
                } else {
                    if(arr[i].children){
                        editTreeData(arr[i].children, treeNode, newName)
                    }
                }
            }
        }

        // 新增-改变源数据
        function addTreeData(arr, treeNode, newName){
            for(let i = 0; i < arr.length; i++) {
                if(arr[i].id === treeNode.id || (arr[i].level === treeNode.level && arr[i].name === treeNode.name)){
                    if(arr[i].children){
                        arr[i].children.push({level: arr[i].level+1,pId: arr[i].id, name: newName})
                    } else {
                        // 如果在新增的数据上再次新增数据 原来就没有id 所以下级得不了pId,除非动态添加并回显id
                        arr[i].children = [{level: arr[i].level+1,pId: arr[i].id, name: newName}]
                    }
                    return
                } else {
                    if(arr[i].children){
                        addTreeData(arr[i].children, treeNode, newName)
                    }
                }
            }
        }

        // 删除-改变源数据
        function deleteTreeData(arr, treeNode) {
            for(let i = 0; i < arr.length; i++) {
                if(arr[i].id === treeNode.id){
                    arr.splice(i, 1)
                } else {
                    if(arr[i].children){
                        deleteTreeData(arr[i].children, treeNode)
                    }
                }
            }
        }
        
        // hover 移除事件
        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_" + treeNode.tId).unbind().remove();
        };

        $(function () {
            $.fn.zTree.init($("#treeDemo"), setting);
            // 展示搜索框
            new MtrSearchZTree();
        });
    </script>

</body>

</html>
posted on 2019-12-10 22:56  佑之以航  阅读(196)  评论(0编辑  收藏  举报