jstree详细的教程及完整实例

jsTree 是一个用于创建交互式树形结构的 jQuery 插件。它允许您通过简单的 HTML 标记来创建树

形结构，并为这些树提供丰富的交互功能。以下是 jsTree 的基本使用方法：

1. 引入 jsTree 库

首先，您需要引入 jsTree 库。您可以从 jsTree 官方网站（https://www.jstree.com/）下载或使用 CDN：

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<!-- 引入 jsTree 样式文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css" />

<!-- 引入 jsTree 脚本文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></script>

2. 创建 HTML 结构

在您的 HTML 文件中创建一个容器元素来放置 jsTree：

<div id="jstree"></div>

3. 初始化 jsTree

在页面加载完成后，使用 jQuery 选择器选中容器元素，并调用 jsTree 方法进行初始化：

<script>
$(document).ready(function() {
        $('#jstree').jstree();
});
</script>

4. 提供数据

您需要提供一个包含树形结构数据的对象，以便 jsTree 能够正确渲染树。数据的格式通常是一个包含节点和子节点的嵌套对象。

<script>
$(document).ready(function() {
    $('#jstree').jstree({
         'core' : {
         'data' : [
         {
               'text' : 'Root node',
               'children' : [
                     { 'text' : 'Child node 1' },
                     { 'text' : 'Child node 2' }
               ]
         }]
       }
    });
});
</script>

5. 处理事件

您可以通过监听 jsTree 的事件来处理用户交互。例如，监听节点被选中的事件：

<script>
$(document).ready(function() {
        $('#jstree').jstree({
              'core' : {
              'data' : [
              {
                    'text' : 'Root node',
                    'children' : [
                          { 'text' : 'Child node 1' },
                          { 'text' : 'Child node 2' }
                   ]
               }
             ]
           }
        });

        // 监听节点被选中的事件
       $('#jstree').on('select_node.jstree', function(e, data) {
        console.log('Node selected:', data.node.text);
     });
});
</script>

以上是一个简单的 jsTree 使用示例。您可以根据您的需求进一步配置和定制。详细的文档和示例可以在 jsTree 官方网站上找到：https://www.jstree.com/docs/