zTree树状图插件的渲染以及数据的传入

最新推荐文章于 2025-06-28 12:51:07 发布

原创最新推荐文章于 2025-06-28 12:51:07 发布 · 1.5k 阅读

CC 4.0 BY-SA版权

本文介绍了在系统开发中采用zTree插件实现树状图功能的过程。zTree是一款基于JQuery的树形插件，用于展示商品类型分类。文章详细讲解了zTree的功能配置、数据结构以及如何将数据传入树状图，同时展示了如何启用增删改功能，以及在实际应用中的效果。zTree的提示框功能是其区别于其他插件的一大亮点。

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

在做系统的过程中，有个页面要用到树状图功能，该页面需要通过树状图来向用户展示其中已定义好的各种商品类型，以便于用户对商品的分类以及了解。为此我在网上找了各种各样的树状图插件，有layui的原声js树状图，也有的是网上的大神们自己原创的。找了大概一个多小时，最终确定：使用以JQuery函数插件为基础而运行的zTree树状图插件，如下图：
在这里插入图片描述左侧的框框内就是zTree树状图了，右边的文字则是使用的配置参数，如果要为树状图加上额外的扩展性功能的话，更改或增加配置项便可。但在修改配置项之前还是要多看看zTree的配置说明，了解清楚后再使用，这一点很重要。首先需要了解的是zTree中的功能性代码(附带解释)：

var setting = {
            
            view: {
//selectedMulti:(设置是否允许同时选中多个节点。默认值：true)
                selectedMulti: false
            },
            edit: {
//enable:(设置 zTree 是否开启异步加载模式。默认值：false)
                enable: true,
                //showRemoveBtn:(设置是否显示删除按钮，默认值：false)
                showRemoveBtn: false,
                //showRenameBtn:(设置是否显示编辑名称按钮，默认值：true)
                showRenameBtn: false
            },
            data: {
                keep: {
                    //parent:(zTree 的节点父节点属性锁。默认值：false)
                    parent: true,
                    //leaf:(zTree 的节点叶子节点属性锁。默认值：false)
                    leaf: true
                },
                simpleData: {
                    //功能同上一致
                    enable: true
                }
            },
            callback: {
                //beforeDrag:(用于捕获节点被拖拽之前的事件回调函数，并且根据返回值确定是否允许开启拖拽操作。默认值：null)
                beforeDrag: beforeDrag,
                //beforeRemove:(用于捕获节点被删除之前的事件回调函数，并且根据返回值确定是否允许删除操作。默认值：null)
                beforeRemove: beforeRemove,
                //beforeRename:(用于捕获节点编辑名称结束（Input 失去焦点 或 按下 Enter 键）之后，更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作。默认值：null)
                beforeRename: beforeRename,
                //onRemove:(用于捕获删除节点之后的事件回调函数。默认值：null)
                onRemove: onRemove
            }
        };

功能项配置好后，再来看看数据项的配置结构，到底是怎么将数据传入树状图当中的呢?
首先声明一个变量，变量中传入以方括号中的结构为标准的数据，其中pId的值若是为0则该条数据为父节点，若为除0以外的其他值(1,2,3…)则为子节点，节点中的pId值为1则表示该条节点为id为1的父节点下面的其中一条子节点。正是以这种数据的传输结构，清晰的定义了那些节点是“父”，那些是“父”下面的“子”：

var zNodes = [
        	{ id: 1, pId: 0, name: "父节点 1", open: true },
        	{ id: 11, pId: 1, name: "叶子节点 1-1" },
        	{ id: 12, pId: 1, name: "叶子节点 1-2" },
        	{ id: 13, pId: 1, name: "叶子节点 1-3" },
        	{ id: 2, pId: 0, name: "父节点 2", open: true },
        	{ id: 21, pId: 2, name: "叶子节点 2-1" },
        	{ id: 22, pId: 2, name: "叶子节点 2-2" },
        	{ id: 23, pId: 2, name: "叶子节点 2-3" },
        ];

当数据也配置完成后，剩下要做的便只有树状图的渲染以及调用了：

var log, className = "dark";
        function beforeDrag(treeId, treeNodes) {
            return true;
        }
        $(document).ready(function () {//树状图加载事件

在init括号内获取到存放树状图的盒子，紧接着将前面设置好的功能配置项以及数据传入其中，这样便可以成功的将zTree渲染出来了：

        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });

因为要给用户提供自我分配商品类型的效果，因此我开启的扩展功能是树状图的增、删、改功能，该功能开启后，用户便可以直接对树状图进行操作，在节点的右侧会出现三个相应的操作图标，并且不必担心误操作，每次对树状图进行操作时，都会弹出提示框提醒是否新增或删除，当然了，如果觉得这些提示框烦人的话也可以屏蔽掉。如下图演示：
在这里插入图片描述
zTree自带的弹出提示框也是我从众多树状图插件中决定选择它的重要原因，毕竟其他类似的插件很少能做到这样。最后，来看看实际运用到页面中是什么效果：
附上zTree官网下载地址，有兴趣的同僚们可以去下载自我体验一下：
http://www.treejs.cn/v3/api.php