jstree 教程：创建交互式树状结构

拾忆4377

于 2024-08-15 14:23:35 发布

阅读量894

点赞数 11

分类专栏：前端文章标签： jstree html javascript

本文链接：https://blog.csdn.net/qq_40998698/article/details/141221033

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jstree 是一个功能强大的 jQuery 插件，用于创建和管理树状结构的数据。它支持许多功能，如节点的增删改查、拖拽操作、异步加载等。本教程将通过一个完整的案例，展示如何使用 jstree 来实现一个基本的树状结构。

1. 安装 jstree

首先，我们需要在项目中引入 jstree。你可以通过以下方式之一来安装：

通过 CDN 引入

在 HTML 文件中添加以下代码来引入 jstree 的 CSS 和 JavaScript 文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jstree 示例</title>
  <!-- 引入 jstree 的 CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css" />
</head>
<body>
  <!-- 用于渲染树的容器 -->
  <div id="tree"></div>

  <!-- 引入 jQuery 和 jstree 的 JavaScript 文件 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

通过 npm 安装

如果你使用的是 npm，你可以通过以下命令安装 jstree：

npm install jstree

然后在你的 JavaScript 文件中引入 jstree 和样式：

import 'jstree';
import 'jstree/dist/themes/default/style.min.css';

2. 创建基本的树结构

我们将在 JavaScript 文件中初始化 jstree，并定义树的数据。创建一个 script.js 文件，并添加以下代码：

$(document).ready(function() {
  // 初始化 jstree
  $('#tree').jstree({
    'core': {
      'data': [
        {
          'text': '根节点',
          'state': { 'opened': true },
          'children': [
            { 'text': '子节点 1' },
            { 'text': '子节点 2' }
          ]
        }
      ]
    }
  });
});

在这个例子中，我们创建了一个简单的树结构，包含一个根节点和两个子节点。

3. 动态添加和删除节点

添加节点

我们可以在树中动态添加节点：

// 添加一个新节点
$('#tree').jstree(true).create_node('#', { 'text': '新节点' }, 'last');

4. 监听事件

jstree 提供了丰富的事件，可以监听和处理节点的选择和取消选择：

// 监听节点选择事件
$('#tree').on('select_node.jstree', function(e, data) {
  console.log('选择的节点:', data.node.text);
});

// 监听节点取消选择事件
$('#tree').on('deselect_node.jstree', function(e, data) {
  console.log('取消选择的节点:', data.node.text);
});

5. 配置选项

jstree 支持多种配置选项，可以用来调整树的外观和功能。例如：

$('#tree').jstree({
  'core': {
    'themes': {
      'icons': false // 禁用节点图标
    }
  },
  'plugins': ['checkbox', 'contextmenu', 'dnd'] // 启用插件
});

在上面的代码中，我们禁用了节点图标，并启用了 checkbox、contextmenu 和 dnd 插件。

6. 使用 AJAX 加载数据

你可以使用 AJAX 从服务器动态加载树的数据：

$('#tree').jstree({
  'core': {
    'data': {
      'url': '/get-tree-data', // 服务器端接口
      'data': function(node) {
        return { 'id': node.id }; // 向服务器传递的参数
      }
    }
  }
});

7. 自定义节点

jstree 允许自定义节点的显示内容和样式：

$('#tree').jstree({
  'core': {
    'data': [
      {
        'text': '自定义节点',
        'icon': 'https://example.com/icon.png' // 自定义图标
      }
    ]
  }
});

8.完整代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jstree Tutorial</title>
  <!-- 引入 jstree 的 CSS 样式 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css" />
  <!-- 引入 jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <!-- 引入 jstree 的 JavaScript 文件 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></script>
</head>
<body>
  <!-- 用于渲染树的容器 -->
  <div id="tree"></div>
  <button id="add-node">添加节点</button>
  <button id="delete-node">删除节点</button>
  <button id="get-selected">获取选中节点</button>

  <script>
    $(document).ready(function() {
      // 初始化 jstree
      $('#tree').jstree({
        'core': {
          'data': [
            {
              'text': 'Root Node',
              'state': { 'opened': true },  // 默认展开
              'children': [
                { 'text': 'Child Node 1' },
                { 'text': 'Child Node 2' }
              ]
            }
          ]
        },
        'plugins': ['contextmenu', 'dnd', 'checkbox'] // 启用上下文菜单、拖放和复选框插件
      });

      // 添加节点按钮点击事件
      $('#add-node').click(function() {
        var newNodeText = 'New Node ' + new Date().toLocaleTimeString();
        // 在树的根节点下添加新节点
        $('#tree').jstree(true).create_node('#', { 'text': newNodeText }, 'last');
      });

      // 删除节点按钮点击事件
      $('#delete-node').click(function() {
        var selectedNodes = $('#tree').jstree(true).get_selected();
        if (selectedNodes.length > 0) {
          // 删除选中的节点
          $('#tree').jstree(true).delete_node(selectedNodes);
        } else {
          alert('请先选择一个节点');
        }
      });

      // 获取选中节点按钮点击事件
      $('#get-selected').click(function() {
        var selectedNode = $('#tree').jstree(true).get_selected(true)[0];
        if (selectedNode) {
          alert('选中的节点: ' + selectedNode.text);
        } else {
          alert('没有选中的节点');
        }
      });

      // 监听节点选择事件
      $('#tree').on('select_node.jstree', function(e, data) {
        console.log('Selected node:', data.node.text);
      });

      // 监听节点取消选择事件
      $('#tree').on('deselect_node.jstree', function(e, data) {
        console.log('Deselected node:', data.node.text);
      });
    });
  </script>
</body>
</html>