html treedemo目录树默认打开,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   打开页面，观察图标更换情况；

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