react中如何实现简单树形结构的构建?介绍zTree

时间:2024-03-24 20:40:13

问题:一个需求是一个树形接口,数据有多级结构,而且功能有增查删改重命名拖拽等~
使用场景:针对于react项目中,觉得zTree使用起来特别方便,而且觉得资料挺少的,所以,就做一个总结哈~

一:在react项目中如果引入zTree呢:
首先:npm install zTree --save
然后:import zTree from './zTree'

二:zTree的介绍:
1、zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件
2、zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载
3、采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀
4、兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
5、支持 JSON 数据
6、支持静态 和 Ajax 异步加载节点数据
7、支持任意更换皮肤 / 自定义图标(依靠css)
8、支持极其灵活的 checkbox 或 radio 选择功能
9、提供多种事件响应回调
10、灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟
11、在一个页面内可同时生成多个 Tree 实例
12、简单的参数配置实现 灵活多变的功能

三:核心的函数和属性介绍:
核心:zTree(setting, [zTreeNodes])
这个函数接受一个JSON格式的数据对象setting和一个JSON格式的数据对象zTreeNodes,从而建立 Tree。

核心参数:setting
zTree 的参数配置都在这里完成,简单的说:树的样式、事件、访问路径等都在这里配置

相关配置如下:
react中如何实现简单树形结构的构建?介绍zTree

东西和需要注意的地方有点多,大家有需要的可以参考官方网址哦~

四:下面将介绍重点zTree的详细资料:
zTree官方网址: http://www.ztree.me/v3/main.php#_zTreeInfo
zTree中demo演示: http://www.treejs.cn/v3/demo.php#_101
zTree中API文档: http://www.treejs.cn/v3/api.php
实现的效果如下所示:
react中如何实现简单树形结构的构建?介绍zTree

文档中右侧有个文件路径,根据这个可以找到左侧中间效果的代码

react项目中具体使用方式可以参考这个,实现的功能多,而且很方便,后续还会有补充,文笔不是很好,请大家见谅~