资源

Demo：jsTree
中文网：
- 翻译简述 · jsTree 文档中文翻译 (gitbooks.io)
- jsTree 中文文档 (cndoc.wiki)
Github：vakata/jstree: jquery tree plugin (github.com)

快速开始

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

<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>

开始第一个示例代码：

<!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>
    <!-- 3 setup a container element -->
    <div 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();
            // 7 bind to events triggered on the tree
            $('#jstree').on("changed.jstree", function (e, data) {
                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');
                $('#jstree').jstree('select_node', 'child_node_1');
                $.jstree.reference('#jstree').select_node('child_node_1');
            });
        });
    </script>
</body>

</html>

示例代码简介

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

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

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