JStree 绘制文件树（1）—— JsTree使用Demo以及自定义图标更换

项目中需要向用户展示存储在云上的文件的目录结构，以便于用户选择下载使用，故使用JSTree进行数据的异步加载和绘制。最终的效果简图如下所示：

             

 

因初次使用JSTree进行异步数据加载和文件树图绘制，故记录该框架使用情况。

本次记录根据小块的功能划分多篇博客进行， 以便迅速定位到某些小的细节。

JSTree github 地址：https://github.com/vakata/jstree

 

绘制目标： 

       ①：JsTree 入门使用；

       ②：使用自定义图标进行展示；

 

实现方式：

       例1： 使用Json作为绘制文件树图的基础数据，明确 JSTree 使用 json 绘制图表的基本操作；

                  前提了解：

                  绘制 JSTree 的基本 json 数组的数据格式：

         { "id" : "ajson1", "parent" : "#", "text" : "Simple root node"}

                 id： 代表当前节点的唯一标识；

                 parent： 代表父节点的唯一标识，如果没有父节点即是根目录则可设置为"#"；

                 text： 代表当前节点的显示内容；

                 1.1 创建新的 html 文件，并引入项目所需的相应 js 和 css 文件；

                        

                      本人使用分别引入： jsTree.style.min.css / jquery.js / jstree.min.js.

 

                1.2  根据如上的 json 格式构建虚拟数据，并使用 jsTree 方法进行代码编写；

                        

 

                1.3   打开页面，查看实际效果，简单的Demo完成；

                        

 

       例2： 自定义图标以及jsTree的 Type 插件的使用；

                  2.1 修改默认图标，寻找个性化图标.

                        推荐免费彩色图标网站： https://icons8.cn/icons；

 

                 2.2 引入 jsTree 插件， 实现图标修改功能；

                        本次使用的是 type 插件，该插件支持根据 json 中返回数据的 type 进行不同图标指定. 

                        jstree 方法修改如下：

                        

 

               2.3  修改 Json 数组数据，根据自己显示需要添加 type的值；

                      

 

              2.4   打开页面，观察图标更换情况；

                      

 

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