学习# 前端# jQuery# JavaScript

Web-jsTree

H5 显示文件夹树。

资源

快速开始

官方示例

​ 使用 CDNJS 或是本地导入的方式导入所需的文件：

html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

​ 开始第一个示例代码：

html
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>jsTree test</title>
    <!-- 2 load the theme CSS file -->
    <link rel="stylesheet" href="dist/themes/default/style.min.css" />
</head>
 
<body>
    <!-- 3setup a container element -->
    <div id="jstree">
        <!-- 创建一个容器，ID 为 jstree，用于显示树结构。 -->
        <!-- in this example the tree is populated from inline HTML -->
        <ul>
            <!-- 定义一个无序列表，用于构建树状结构的节点。 -->
            <li>Root node 1
                <ul>
                    <li id="child_node_1">Child node 1</li>
                    <li>Child node 2</li>
                </ul>
            </li>
            <li>Root node 2</li>
        </ul>
    </div>
    <button>demo button</button>
    <!-- 创建一个按钮，点击后会触发某些功能。 -->
 
    <!-- 4 include the jQuery library -->
    <script src="dist/libs/jquery.min.js"></script>
    <!-- 5 include the minified jstree source -->
    <script src="dist/jstree.min.js"></script>
    <script>
        $(function () {
            // 6 create an instance when the DOM is ready
            $('#jstree').jstree();  // 初始化 #jstree 元素为 jsTree 实例，生成树状结构。
            // 7 bind to events triggered on the tree
            $('#jstree').on("changed.jstree", function (e, data) {  // 绑定事件处理程序，当树的选择发生改变时，会将选中的节点 ID 打印到控制台。
                console.log(data.selected);
            });
            // 8 interact with the tree - either way is OK
            $('button').on('click', function () {  // 为按钮绑定点击事件，点击时执行以下操作：
                $('#jstree').jstree(true).select_node('child_node_1');  //  选择 ID 为 child_node_1 的节点。
                $('#jstree').jstree('select_node', 'child_node_1');  // 选择节点的另一种方式。
                $.jstree.reference('#jstree').select_node('child_node_1');  // 通过 jsTree 的引用选择节点。
            });
        });
    </script>
</body>
 
</html>

{% hideToggle 示例代码简介 %}

​ 这段代码是一个使用 jsTree 插件创建树形结构的示例。以下是代码的主要部分解释：

  1. <!DOCTYPE html>：声明 HTML 文档类型。
  2. <head>：头部标签，用于指定文档相关信息。
    • <meta charset="utf-8">：指定文档使用 UTF-8 字符编码。
    • <title>jsTree test</title>：设置页面标题。
    • <link rel="stylesheet" href="dist/themes/default/style.min.css" />：引入样式文件。
  3. <body>：主体标签，包含页面内容。
    • <div id="jstree">：设置一个容器元素，用来显示树形结构。
      • <ul>：无序列表，用来存放树的节点。
        • <li>：列表项，代表树的节点。
          • <ul>：嵌套的列表项，表示子节点。
            • <li id="child_node_1">Child node 1</li>：具体的子节点。
    • <button>demo button</button>：按钮元素，用来演示与树交互的操作。
  4. <script src="dist/libs/jquery.min.js"></script>：引入 jQuery 库。
  5. <script src="dist/jstree.min.js"></script>：引入 jsTree 插件。
  6. $(function () { ... });：使用 jQuery 的 DOM 就绪函数，确保在 DOM 加载完成后执行代码。
    • $('#jstree').jstree();：将 #jstree 元素初始化为一个 jsTree 实例。
    • $('#jstree').on("changed.jstree", function (e, data) { ... });：绑定 changed.jstree 事件的回调函数，当树的选中节点发生变化时触发。
    • $('button').on('click', function () { ... });：给按钮绑定点击事件的回调函数。
  7. console.log(data.selected);：在控制台输出当前选中节点的标识。
  8. $('#jstree').jstree(true).select_node('child_node_1');：通过 jsTree 方法选择指定节点。
  9. $.jstree.reference('#jstree').select_node('child_node_1');：通过 jsTree 引用选择指定节点。

​ 总的来说，这段代码使用 jsTree 插件创建了一个简单的树形结构，并提供了一些与树交互的功能。可以通过点击按钮或选择节点来触发事件，并将选中节点的标识输出到控制台。

{% endhideToggle %}

JSON 形式

建一个 <div> 存放这个树：

html
<div id="jsonjsTree"></div>

建一个 json 文件存放数据。

这里引入了 Font Awesome 自定义图标：

json
[
    {
        "id": "0",
        "text": "根节点1",
        "state": {
            "opened": true
        },
        "children": [
            {
                "text": "child1",
                "icon": "fas fa-house",
                "li_attr": { 
                    "style": "color: var(--text-link);"
                }
            },
            {"text": "child2"}
        ]
    },
    {
        "id": "1",
        "text": "根节点2",
        "children": [
            {"text": "child1"},
            {"text": "child2"}
        ]
    }
]

读取 json 格式的数据：

javascript
$("#jsonjsTree").jstree({
    'core': {
        'data': [
            {
                "id": "0",
                "text": "根节点1",
                "state": {
                    "opened": true
                },
                "children": [
                    {
                        "text": "child1",
                        "icon": "fas fa-house",
                        "li_attr": { 
                            "style": "color: var(--text-link);"
                        }
                    },
                    {"text": "child2"}
                ]
            },
            {
                "id": "1",
                "text": "根节点2",
                "children": [
                    {"text": "child1"},
                    {"text": "child2"}
                ]
            }
        ]
    }
});

这里改为读取 data.json 的数据到 'data' 中：

javascript
$("#jsonjsTree").jstree({
    'core': {
        'data': function (node, cb) {
            fetch('data.json')  // JSON 文件的路径
                .then(response => response.json())  // 解析 JSON 数据
                .then(data => cb(data))  // 调用回调函数传递数据
                .catch(error => alert('无法加载数据！'));  // 错误处理
        }
    }
});

最终效果：

真不错！现在我想将它封装成一个类：

javascript
class jsTreeObject {
    constructor(id, data) {
        this.div = $('<div></div>').attr('id', id);
        this.div.jstree({
            'core': {
                'data': function (_, cb) {
                    fetch(data)
                        .then(response => response.json())  // 解析 JSON 数据
                        .then(data => cb(data))  // 调用回调函数传递数据
                        .catch(error => console.error('加载' + data + '失败：' + error));  // 错误处理
                }
            }
        });
    }
 
    render() {
        $(document.currentScript).before(this.div);
    }
}

之后在网页中使用如下语句便可渲染：

html
<script>new jsTreeObject('ID', 'XXX.json').render();</script>