z-tree树节点的增删改

最新推荐文章于 2025-07-07 15:58:46 发布

原创最新推荐文章于 2025-07-07 15:58:46 发布 · 669 阅读

0 ·

CC 4.0 BY-SA版权

个人总结专栏收录该内容

78 篇文章

订阅专栏

本文介绍如何使用z-Tree前端树插件实现数据的动态更新，包括删除、新增及修改操作，并确保左右侧数据的一致性，提供具体实现代码。

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

z-Tree是一款基于jquery的前端树插件，优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器

附上官方中文文档：http://www.treejs.cn/v3/main.php

公司项目中用到了z-tree，左侧树节点与右侧表格信息对应，当右侧表格中数据变化时，左侧树也需要改变，比如右侧表格中系统名称为lvs的数据删除掉，左侧的lvs树节点需要同步删除，最开始的做法是左侧树刷新，但是这样做很不友好，而且当数据量大的时候会更不利于操作，因为每次刷新树节点都是合并状态，还需要一个个打开找到刚刚操作的位置。

最好是左侧树删除的时候不刷新，我想到了树节点自带的删除操作，也就是前端删除

删除：

调用删除接口成功后

success: function (res) {                                   
    if (res.state === "success") {
        $('#table').bootstrapTable("refresh");//右侧表格刷新                             
        var zTree = $.fn.zTree.getZTreeObj("tree");//获取到树节点对象
        for(var i = 0; i < rows.length; i++){
            //rows是一个数组，为选中的被删除数据，遍历rows,根据数据的id获取到树节点数据
            var node = zTree.getNodeByParam("id", rows[i].id, null);
            //利用z-tree提供的removeNode方法删除树节点
            zTree.removeNode(node);
        }
     } else {
                                           
     }
}, error: function (res) {
                                                                            
}

新增：

调用新增接口成功后，需要后台服务返回新增的节点数据

success: function (res) {                                   
    if (res.state === "success") {
        $('#table').bootstrapTable("refresh");//右侧表格刷新                             
        var zTree = $.fn.zTree.getZTreeObj("tree");//获取到树节点对象
        //获取到选中的树节点，也就是新增的节点的父节点，正常情况下都是当前选中的节点
        var nodes = zTree.getSelectedNodes()[0];
        //后台服务返回的新增成功的节点，Object类型
        var newNode = JSON.parse(res.content)[0]  
        //利用z-tree提供的addNodes方法进行新增                                     
        treeNode = zTree.addNodes(nodes, newNode,true);
     } else {
                                           
     }
}, error: function (res) {
                                                                            
}

修改：

调用修改接口成功后，需要后台服务返回修改后的新数据

success: function (res) {                                   
    if (res.state === "success") {
        $('#table').bootstrapTable("refresh");//右侧表格刷新                             
        var zTree = $.fn.zTree.getZTreeObj("tree");//获取到树节点对象
        //获取到选中的树节点，也就是修改的节点的父节点，正常情况下都是当前选中的节点
        var nodes = zTree.getSelectedNodes()[0];
        //通过id获取被修改节点
        var node = zTree.getNodeByParam("id", id, null);                               
        //利用z-tree提供的updateNode方法进行修改                                
        zTree.updateNode(node);
     } else {
                                           
     }
}, error: function (res) {
                                                                            
}

【右上角点个赞，谢谢】