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

问题：需求是树形接口数据有多级结构，而且功能有增查删改重命名拖拽等~

使用场景：针对于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 的参数配置都在这里完成，简单的说：树的样式、事件、访问路径等都在这里配置

相关配置如下：

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

四：下面将介绍重点zTree的详细资料：

zTree官方网址: www.ztree.me/v3/main.php…

zTree中demo演示： www.treejs.cn/v3/demo.php…

zTree中API文档：www.treejs.cn/v3/api.php

实现的效果如下所示：

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

备注：react项目中具体使用方式可以参考这个，实现的功能多，而且很方便，后续还会有补充~

目的：仅仅作为个人笔记使用，如果文中有不对的，欢迎随时指出，谢谢!