前端必备神器：jstree 带你玩转JavaScript树形结构39

你是否也曾为前端页面中复杂的树形结构展示和交互而感到头疼？从文件目录到权限管理，从组织架构到商品分类，树形结构无处不在，但从零开始构建一个功能完善、交互友好的树形控件，无疑是一项耗时耗力的工程。别担心！今天，我将带大家深入了解一个前端界的“树形神器”——jstree，让你告别重复造轮子的烦恼，轻松玩转JavaScript树形结构。

## jstree 是什么？它为何如此受欢迎？

简单来说，jstree 是一个基于 jQuery 的高性能 JavaScript 树形视图插件。它旨在提供一个高度可定制、功能丰富、且易于使用的解决方案，来展示和操作分层数据。作为一款历史悠久且持续更新的优秀插件，jstree 凭借其强大的功能集和良好的社区支持，成为了许多前端开发者在处理树形数据时的首选工具。

它的受欢迎程度并非偶然，主要归功于以下几点：
功能强大： 支持拖拽（drag & drop）、复选框（checkbox）、上下文菜单（context menu）、搜索（search）、懒加载（lazy loading）、节点类型（types）、键盘导航等几乎所有你能想到的树形操作。
高度可定制： 提供丰富的配置选项和主题支持，无论是外观还是行为，你都可以根据项目需求进行深度定制。
多种数据源： 不仅支持通过 HTML 结构初始化，更完美支持 JSON 数据格式，方便与后端数据无缝对接。
事件机制完善： 提供丰富的事件回调，让你能精确地捕捉用户操作和节点状态变化，实现复杂的交互逻辑。
性能优异： 即使处理大量节点，jstree 也能保持流畅的渲染和响应速度。

## 快速上手：引入与基本初始化

使用 jstree 前，请确保你的项目中已引入 jQuery 库，因为 jstree 是基于 jQuery 开发的。你可以通过 CDN 或下载本地文件的方式引入。

1. 引入必要文件：

首先，在你的 HTML 文件中引入 jQuery、jstree 的 CSS 样式和 JavaScript 文件：
<script src="/ajax/libs/jquery/3.6.0/"></script>

<link rel="stylesheet" href="/ajax/libs/jstree/3.3.11/themes/default/" />

<script src="/ajax/libs/jstree/3.3.11/"></script>

2. 准备 HTML 容器：

在你的 HTML 文件中，创建一个 `div` 元素作为 jstree 的容器：<div id="treeContainer"></div>

3. 初始化 jstree：

现在，你可以使用几行 JavaScript 代码来初始化 jstree 了。jstree 支持两种主要的初始化数据源：HTML 和 JSON。

a) 使用 HTML 初始化（最简单）：

如果你的数据已经以嵌套的 `<ul>` 和 `<li>` 结构存在于 HTML 中，jstree 可以直接将其转换为树形视图。<div id="htmlTree">
<ul>
<li>根节点 1
<ul>
<li>子节点 1.1</li>
<li>子节点 1.2</li>
</ul>
</li>
<li>根节点 2</li>
</ul>
</div>
<script>
$(function() {
$('#htmlTree').jstree();
});
</script>

b) 使用 JSON 数据初始化（更常用，更灵活）：

在实际项目中，数据往往来自后端接口，以 JSON 格式传输。jstree 对 JSON 数据支持得非常好。

JSON 数据有两种推荐格式：
扁平化数组： 每个节点包含 `id`、`parent`（父节点 `id`）和 `text`（显示文本）。根节点 `parent` 通常设为 `#`。
嵌套结构： 包含 `children` 数组来表示子节点。

以下是扁平化数组的示例：$(function() {
$('#treeContainer').jstree({
'core': {
'data': [
{ "id": "ajson1", "parent": "#", "text": "简单的根节点" },
{ "id": "ajson2", "parent": "#", "text": "另一个根节点" },
{ "id": "ajson3", "parent": "ajson2", "text": "ajson2 的子节点" },
{ "id": "ajson4", "parent": "ajson2", "text": "ajson2 的另一个子节点" }
],
// 确保懒加载关闭，否则可能不显示
'load_open': true
}
});
});

## 核心概念与高级功能解析

jstree 的强大之处在于其灵活的配置和丰富的插件。理解这些，你就能驾驭 jstree 的各种能力。

1. `core` 配置项

`core` 是 jstree 最核心的配置对象，它控制着树的基本行为和外观。常用的配置项包括：
`data`：定义树的数据源，可以是静态 JSON 数组、URL 字符串（用于懒加载）或返回 JSON 数据的函数。
`themes`：配置主题，如 `name`（主题名称，默认 `default`），`dots`（是否显示连接线），`icons`（是否显示节点图标）。
`animation`：节点展开/折叠时的动画速度。
`check_callback`：一个函数，用于控制拖拽、删除、创建等操作是否允许。
`multiple`：是否允许同时选择多个节点。
`force_text`：是否强制将节点文本渲染为纯文本，防止 HTML 注入。

示例：更复杂的 JSON 数据结构

JSON 节点对象可以包含更多属性来控制节点状态和行为：let myData = [
{ "id": "root_1", "parent": "#", "text": "菜单根目录", "icon": "fa fa-folder-open", "state": { "opened": true, "selected": false } },
{ "id": "child_1", "parent": "root_1", "text": "用户管理", "icon": "fa fa-users" },
{ "id": "child_2", "parent": "root_1", "text": "权限设置", "icon": "fa fa-lock", "state": { "disabled": true } }, // 禁用该节点
{ "id": "grandchild_1", "parent": "child_1", "text": "新增用户", "icon": "fa fa-plus-circle" }
];
$('#treeContainer').jstree({
'core': {
'data': myData,
'themes': {
'name': 'default', // 或 'default-dark'
'dots': true, // 显示节点连接线
'icons': true // 显示节点图标
},
'check_callback': true // 允许所有操作回调
}
});

其中：

`id`：节点的唯一标识。
`parent`：父节点的 `id`，根节点为 `#`。
`text`：节点显示文本。
`icon`：节点图标，可以是 CSS 类名（如 Font Awesome 图标）或图片路径。
`state`：节点状态对象，包含 `opened`（是否展开）、`selected`（是否选中）、`disabled`（是否禁用）等。
`li_attr` / `a_attr`：为 `<li>` 或 `<a>` 标签添加自定义属性。

2. `plugins` 配置项

插件是 jstree 扩展功能的主要方式。要使用某个功能，通常需要先在 `plugins` 数组中声明它，然后在对应插件的配置对象中进行详细设置。

常用的插件包括：
`checkbox`：为每个节点添加复选框，实现多选功能。
`dnd`：支持节点拖拽功能，可以改变节点位置或父子关系。
`contextmenu`：右键点击节点时显示自定义上下文菜单。
`search`：提供搜索功能，高亮匹配节点。
`wholerow`：让整个行都可以点击和选中，而不仅仅是节点文本。
`state`：保存树的展开/选择状态到 localStorage，页面刷新后恢复。
`types`：根据节点类型定义不同的图标和行为。
`sort`：对节点进行排序。

示例：启用多个插件$(function() {
$('#treeContainer').jstree({
'core': { /* ... core 配置 ... */ },
'plugins': ["checkbox", "dnd", "contextmenu", "wholerow"],
'checkbox': {
'whole_node': false, // 点击节点文本不选中复选框，只点击复选框选中
'three_state': true // 父子节点联动
},
'contextmenu': {
'items': function($node) {
var tree = $('#treeContainer').jstree(true);
return {
"Create": {
"separator_before": false,
"separator_after": false,
"label": "创建新节点",
"action": function (obj) {
$node = tree.create_node($node);
($node);
}
},
"Rename": {
"separator_before": false,
"separator_after": false,
"label": "重命名",
"action": function (obj) {
($node);
}
},
"Delete": {
"separator_before": false,
"separator_after": false,
"label": "删除",
"action": function (obj) {
tree.delete_node($node);
}
}
};
}
},
'dnd': {
'is_draggable': function(nodes) {
// 只有特定的节点可以拖拽
return true;
}
}
});
});

3. jstree 方法（API）

jstree 提供了丰富的 API 方法，让你可以在外部控制树的行为。调用方法通常是这样：`$('#treeContainer').jstree(true).方法名(参数);`

常用方法：
`open_node(node, callback, animation)`：展开节点。
`close_node(node, callback, animation)`：关闭节点。
`select_node(node)`：选中节点。
`deselect_node(node)`：取消选中节点。
`get_selected(full)`：获取当前选中的节点 ID 数组。`full` 为 `true` 则返回完整节点对象。
`create_node(parent, node, position, callback, is_loaded)`：创建新节点。
`delete_node(node)`：删除节点。
`rename_node(node, new_text)`：重命名节点。
`refresh()`：刷新整个树。
`refresh_node(node)`：刷新指定节点及其子节点。
`get_json()`：获取树的 JSON 数据。

示例：获取选中节点$(function() {
$('#treeContainer').jstree({ /* ... */ });
// 绑定一个按钮点击事件
$('#getSelectionBtn').on('click', function() {
let selectedNodes = $('#treeContainer').jstree(true).get_selected(true); // 获取完整节点对象
let nodeIds = (node => );
alert("选中的节点ID：" + (', '));
});
});

4. jstree 事件

jstree 会触发大量事件，允许你监听用户交互和树状态变化。事件名称通常以 `.jstree` 结尾。

常用事件：
``：jstree 初始化完成。
``：节点被展开。
``：节点被关闭。
``：节点被选中。
``：节点被取消选中。
``：选中的节点发生变化（通常用于多选）。
``：节点被拖拽移动。
``：节点被删除。
``：节点被创建。

示例：监听节点选中事件$(function() {
$('#treeContainer').jstree({ /* ... */ });
$('#treeContainer').on('', function (e, data) {
('节点 ' + + ' (ID: ' + + ') 被选中了。');
// 包含被选中节点的详细信息
});
$('#treeContainer').on('', function (e, data) {
// 当多选状态下，每次选择/取消选择都会触发
let i, j, r = [];
for(i = 0, j = ; i < j; i++) {
(.get_node([i]).text);
}
('当前选中：' + (', '));
});
});

## 实战技巧与最佳实践

1. 结合后端进行懒加载（Lazy Loading）

对于节点数量庞大的树，一次性加载所有数据会严重影响页面性能。jstree 的懒加载功能可以按需加载子节点。你只需将 `` 设置为一个 URL 或返回 Promise 的函数，jstree 会在节点展开时自动请求子节点数据。$('#treeContainer').jstree({
'core': {
'data': {
'url': function (node) {
// 如果是根节点，请求根数据；否则请求子节点数据
return === '#' ? '/api/get_root_nodes' : '/api/get_children/' + ;
},
'data': function (node) {
// 可选：发送额外的参数
return { 'id': };
}
},
'themes': { 'dots': true },
'check_callback': true
}
});

后端 API 需要返回符合 jstree JSON 格式的数据。

2. 利用 `types` 插件定义不同节点类型

`types` 插件允许你根据节点类型应用不同的图标、CSS 类或行为。这在文件管理器、权限配置等场景中非常有用。$('#treeContainer').jstree({
'core': { /* ... */ },
'plugins': ["types"],
'types': {
"default": { // 默认类型
"icon": "fa fa-file"
},
"folder": { // 文件夹类型
"icon": "fa fa-folder"
},
"file": { // 文件类型
"icon": "fa fa-file-alt"
},
"image": { // 图片文件类型
"icon": "fa fa-image"
}
}
});
// JSON 数据中指定类型
let typedData = [
{ "id": "f1", "parent": "#", "text": "项目文件夹", "type": "folder" },
{ "id": "f1_1", "parent": "f1", "text": "文档.txt", "type": "file" },
{ "id": "f1_2", "parent": "f1", "text": "图片.jpg", "type": "image" }
];

3. 性能优化
懒加载： 如前所述，对于大数据量是必选项。
按需刷新： 尽量使用 `refresh_node()` 刷新局部节点，而不是 `refresh()` 刷新整个树。
禁用不必要的动画： 将 `` 设置为 `0` 可以加快渲染速度。
避免频繁操作 DOM： 如果需要进行大量节点操作，可以考虑先将 jstree 销毁 (`destroy()`)，操作数据后再重新初始化，或在操作期间禁用事件监听。

## 常见问题与解决方案
问题： jstree 样式不生效或图标不显示。
解决方案： 确保正确引入了 ``，并且 Font Awesome 或其他图标库已正确引入。检查 CSS 路径是否正确。
问题： JSON 数据加载失败，树不显示。
解决方案： 检查 JSON 格式是否符合 jstree 的要求（特别是 `id`, `parent`, `text` 字段）。如果使用懒加载，确保后端接口返回的数据格式正确。同时，检查浏览器控制台是否有 JavaScript 错误。
问题： 拖拽或上下文菜单功能不工作。
解决方案： 确保在 `plugins` 数组中正确声明了 `dnd` 或 `contextmenu` 插件，并且相关的配置（如 `check_callback` 或 `` 函数）已正确设置。
问题： 在 `` 中使用 URL 进行懒加载时，初次加载不显示根节点。
解决方案： 确保 ` === '#'` 时，后端返回根节点数据。同时，可以尝试设置 `core.load_open: true` 确保根节点加载后是展开状态。