【JavaScript学习】zTree 实现 CRUD，并获取每一步相关数据，发送请求即可-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38762237/article/details/94399993

本文详细介绍了使用zTree实现树状结构的增删改查功能，包括如何通过JavaScript操作节点，实现动态添加、删除和编辑节点，以及如何获取选中的节点ID。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相关的静态文件直接下载官网的即可

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>Tellsea 的树结构 CRUD</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="/css/metroStyle/metroStyle.css">
</head>

<body>
<h1>Metro 风格</h1>
<ul id="treeDemo" class="ztree"></ul>
<button onclick="getzTreeCheckIds()">获得所有选中的ids</button>
<br>
<button onclick="initzTreeCheck()">测试初始化设置选中</button>

</body>
<script src="/js/jquery-1.4.4.min.js"></script>
<script src="/js/jquery.ztree.core.js"></script>
<script src="/js/jquery.ztree.excheck.js"></script>
<script src="/js/jquery.ztree.exedit.js"></script>
<script src="/utils/tellsea.utils.js"></script>
<script type="text/javascript">
    /** ------------------------------------------------------------------------------------------- tree 功能开始 */
    var zTreeSetting = {
        view: {
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom,
            selectedMulti: false
        },
        check: {
            enable: true // 开启复选框
        },
        data: {
            simpleData: {
                enable: true // 开启简单数据
            }
        },
        edit: {
            enable: true // 开启编辑
        },
        callback: {
            beforeRemove: zTreeBeforeRemove,
            onRemove: zTreeOnRemove,
            onRename: zTreeOnRename,
        }
    };

    var zNodes = [
        {id: 1, pId: 0, name: "系统管理", open: true},
        {id: 11, pId: 1, name: "用户管理"},
        {id: 111, pId: 11, name: "新增用户"},
        {id: 112, pId: 11, name: "修改用户"},
        {id: 113, pId: 11, name: "删除用户"},
        {id: 114, pId: 11, name: "查询用户"},
        {id: 12, pId: 1, name: "角色管理"},
        {id: 121, pId: 12, name: "新增角色"},
        {id: 122, pId: 12, name: "修改角色"},
        {id: 123, pId: 12, name: "删除角色"},
        {id: 124, pId: 12, name: "查询角色"},
        {id: 13, pId: 1, name: "父节点13", isParent: true},
        {id: 2, pId: 0, name: "父节点2"},
        {id: 21, pId: 2, name: "父节点21", open: true},
        {id: 211, pId: 21, name: "叶子节点211"},
        {id: 212, pId: 21, name: "叶子节点212"},
        {id: 213, pId: 21, name: "叶子节点213"},
        {id: 214, pId: 21, name: "叶子节点214"},
        {id: 22, pId: 2, name: "父节点22"},
        {id: 221, pId: 22, name: "叶子节点221"},
        {id: 222, pId: 22, name: "叶子节点222"},
        {id: 223, pId: 22, name: "叶子节点223"},
        {id: 224, pId: 22, name: "叶子节点224"},
        {id: 23, pId: 2, name: "父节点23"},
        {id: 231, pId: 23, name: "叶子节点231"},
        {id: 232, pId: 23, name: "叶子节点232"},
        {id: 233, pId: 23, name: "叶子节点233"},
        {id: 234, pId: 23, name: "叶子节点234"},
        {id: 3, pId: 0, name: "父节点3", isParent: true}
    ];

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

    // 新增节点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: (100 + newCount), pId: treeNode.id, name: "new node" + (newCount++)});
            return false;
        });
    }

    /** ----------------------------------------------- 删除 */
    // 删除节点之前
    function zTreeBeforeRemove(treeId, treeNode) {
        return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
    }

    // 删除节点DOM
    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_" + treeNode.tId).unbind().remove();
    };

    // 删除节点
    function zTreeOnRemove(event, treeId, treeNode) {
        // todo 发送请求
        alert("删除节点" + treeNode.id + ", " + treeNode.name);
    }

    /** ----------------------------------------------- 编辑 */
    // 编辑节点
    function zTreeOnRename(event, treeId, treeNode, isCancel) {
        alert(treeNode.id + ", " + treeNode.name);
    }

    /** ----------------------------------------------- 保存 */
    // 获得所有选中的节点
    function getzTreeCheckIds() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = zTree.getCheckedNodes(true);
        var arrIds = new Array();
        for (var i = 0; i < nodes.length; i++) {
            arrIds.push(nodes[i].id);
        }
        return arrIds.toString();
    }

    // 初始化选中的节点
    function initzTreeCheck() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var node = zTree.getNodes(); // 可以获取所有的父节点
        var nodes = zTree.transformToArray(node); // 获取树所有节点
        for (var i = 0; i < nodes.length; i++) {
            var node = zTree.getNodeByParam("id", nodes[i].id);
            node.checked = true;
            zTree.updateNode(node);
        }
    }

    /** ------------------------------------------------------------------------------------------- tree 功能开始 */
</script>
</html>