使用zTree制作简单异步加载树形结构,支持增删改拖动

超、凢脫俗 2022-05-30 00:11 120阅读 0赞

ztree版本 v3.5.34,数据交互格式为json.

ztreeAPI : [点击打开链接][Link 1]

<!DOCTYPE html> <HTML> <HEAD> <TITLE>ztree test</TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css"> <style type="text/css"> .ztree li span.button.add {
                margin-left: 2px; margin-right: -1px; background-position: -144px 0; vertical-align: top; *vertical-align: middle }
        </style> </HEAD> <BODY> <div> <ul id="treeDemo" class="ztree"></ul> </div> </BODY> <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <script type="text/javascript" src="jquery.ztree.all.min.js"></script> <SCRIPT LANGUAGE="JavaScript"> var zTreeObj; var oldName; var setting = {
            async: {
                enable: true, type: 'post', dataType: "json", url: "接口地址", autoParam: ["id"], dataFilter: filter }, data: {
                simpleData: {
                    enable: true, idKey: "id", pIdKey: "pId", rootPId: 0 }, }, view: {
                expandSpeed: "", addHoverDom: addHoverDom, removeHoverDom: removeHoverDom, selectedMulti: false }, edit: {
                enable: true, drag: {
                    autoExpandTrigger: true, prev: false, next: false, inner: true }
            }, callback: {
                onRename: zTreeOnRename, beforeRename: beforeRename, beforeEditName: zTreeBeforeEditName, onRemove: zTreeOnRemove, beforeRemove: beforeRemove, onDrop: zTreeOnDrop, beforeDrop: zTreeBeforeDrop }
        }; $(document).ready(function () {
            var rootEles; //获取父节点 $.ajax({
                url: "接口地址",
                type: "post",
                data: {},
                success: function (res) {
                    rootEles = res.parent;
                    console.log(rootEles)
                    zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, rootEles);
                }
            });
        });
    
        function drewRoots(rootEles) {
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, rootEles);
        }
    
        // 过滤异步加载ztree时返回的数据
        function filter(treeId, parentNode, childNodes) {
            console.log(parentNode)
            if (!childNodes)
                return null;
            return childNodes.childs;
        }
        // rename
        function zTreeOnRename(event, treeId, treeNode, isCancel) {
            console.log(treeNode)
            var name = treeNode.name;
            if (name.indexOf("_") != -1) {
                name = treeNode.name.substring(0, treeNode.name.indexOf("_"))
            }
            var data = {
                id: treeNode.id,
                pId: treeNode.pId,
                name: name
            }
            // 判断名称是否经过修改
            var editFlag = false;
            if (oldName) {
                if (oldName.indexOf("_") != -1) {
                    oldName = oldName.substring(0, oldName.indexOf("_"))
                }
                editFlag = oldName != name
            }
            console.log(editFlag)
            if (!isCancel && editFlag) {
                $.ajax({
                    type: 'post',
                    url: '接口地址',
                    data: data,
                    success: function (res) {
                        alert(res.msg);
                        if (treeNode.id == -1) {
                            //刷新id
                            window.location.reload();
                        }
                    }
                });
            } else {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.cancelEditName();
            }
        }
        function beforeRename(treeId, treeNode, newName) {
            if (newName.length == 0) {
                setTimeout(function () {
                    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                    zTree.cancelEditName();
                    alert("节点名称不能为空.");
                }, 0);
                return false;
            }
            return true;
        }
        function zTreeBeforeEditName(treeId, treeNode) {
            oldName = treeNode.name;
            console.log("old name : " + oldName)
            return true;
        }
        // remove
        function zTreeOnRemove(event, treeId, treeNode) {
            console.log(treeNode);
            $.ajax({
                type: 'post',
                url: '接口地址',
                data: {
                    id: treeNode.id
                },
                success: function (res) {
                    alert(res.msg);
                }
            });
    
        }
        function beforeRemove(treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.selectNode(treeNode);
            return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
        }
        // drop
        function zTreeBeforeDrop(treeId, treeNodes, targetNode, moveType) {
            return confirm("确认移动 节点 -- " + treeNodes[0].name + " 吗？");
        };
        function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
            if (targetNode == null) {
                console.log('drag give up!')
            } else {
                console.log('from node :' + treeNodes[0])
                console.log('to node :' + targetNode)
                var data = {
                    id: treeNodes[0].id,
                    targetId: targetNode.id
                }
                console.log(data)
                $.ajax({
                    type: 'post',
                    url: '接口地址',
                    data: data,
                    success: function (res) {
                        alert(res.msg)
                    }
                });
            }
        };
        // add hover dom
        var newCount = -1;
        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='add node' οnfοcus='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: (newCount), pId: treeNode.id, name: "请重新命名新节点-"});
                return false;
            });
        };
        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_" + treeNode.tId).unbind().remove();
        };
    
    </SCRIPT>
    </HTML>

ztree查询功能参考//用按钮查询节点

function searchNodes(){
        var treeObj = $.fn.zTree.getZTreeObj("tree-obj");
        var keywords=$("#keyword").val();
        var nodes = treeObj.getNodesByParamFuzzy("name", keywords, null);
        if (nodes.length>0) {
            treeObj.selectNode(nodes[0]);
        }
    }

[Link 1]: http://http//www.treejs.cn/v3/api.php