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

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

博客地址 ：https://blog.csdn.net/hewenbo111/article/details/90182394

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

 

绘制目标： 

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

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

 

实现方式：

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

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

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

 

                 1.1 修改并解读jstree 方法；

                       

 

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

                      

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

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

                                  https://wdd.js.org/origin-null-is-not-allowed.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 打开页面，观察实际效果；

                        

 

                        

 

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