JStree 绘制文件树（2）—— 异步加载父节点数据，点击后添加子节点，并展开或合并

上一篇博客中演示了JsTree的基本使用，使用的是本地不可变数据进行Demo绘制。

在实际使用中，后台数据经常需要异步获取，所以本次介绍在实际绘制文件树过程中使用的异步加载数据的方式。

绘制目标：

①：异步加载初始化 Jstree 的数据；

②：点击加载初始化后的节点数据；

实现方式：

例1：使用异步加载的方式通过后台请求返回JSON绘制JSTree；

前提了解：因暂不涉及后台的具体请求及实现，所以仅演示异步加载的方式，

数据仍然的伪造的原博客数据，仅仅保存json文件的地址作为url的路径；

1.1 修改并解读jstree 方法；

1.2 打开页面观察实际绘制效果；

提示：若直接使用谷歌浏览器打开本地的html而不是通过访问服务器上静态资源的方式

进行页面展开会有访问本地文件的跨域问题，解决方式可以参考博客：

例 2：单个节点点击后一步请求数据，添加子节点；

2.1 添加节点的点击事件；

jsTree的节点点击并没有click方法，而提供的是select_node方法。

2.2 使用本地数据或Ajax获取数据，添加子节点；

这里创建节点使用的是本地数据，ajax获取数据不做赘述，只需将添加节点方法放到回调函数中操作即可。

节点数据结构与之前保持一致，并且在使用create_node方法是需要给定父节点id，当前节点数据，last表示

在后面添加。

2.3 获取每个节点在文件树中的相对路径；

异步添加节点难免需要获取节点的具体地址，故添加如下的代码获取节点的相对路径：

             $('#jsTree-First').jstree("get_path", data.node, "/")

2.4 点击父节点展开后合并；

因定义了select_node方法添加节点，故点击父节点并不能直接展开或合并，故添加如下代码：

             data.instance.toggle_node(data.node);

最终修改后的方法截图如下：

2.5 打开页面，观察实际效果；

如有任何问题，欢迎指正讨论，谢谢！

来源：CSDN

作者：代码小司机

链接：https://blog.csdn.net/hewenbo111/article/details/90287930

标签