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

最新推荐文章于 2024-03-09 21:49:48 发布

aludashic9

最新推荐文章于 2024-03-09 21:49:48 发布

阅读量2.4k

点赞数

分类专栏： ztree 文章标签： ztree

本文链接：https://blog.csdn.net/qq_39840681/article/details/79399742

版权

ztree 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

ztreeAPI : 点击打开链接

<!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]);
    }
}

aludashic9

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
使用zTree制作简单异步加载树形结构,支持增删改拖动

ztree版本 v3.5.34,数据交互格式为json.ztreeAPI : 点击打开链接&lt;!DOCTYPE html&gt;&lt;HTML&gt;&lt;HEAD&gt; &lt;TITLE&gt;ztree test&lt;/TITLE&gt; &lt;meta http-equiv="content-type" content="text/html; cha
复制链接

扫一扫