前端高效开发必备：jsTree树形控件完全指北

Hi，我是前端人类学！

在后台管理系统的开发中，树形结构的展示需求随处可见——组织架构、菜单权限、分类目录、文件管理……实现一个交互友好、功能完善的树形控件，往往比想象中复杂得多。

今天要介绍的 jsTree，正是解决这类问题的利器。它是一个基于 jQuery 的免费开源树形插件（MIT协议），功能强大、配置灵活，几乎能满足你对树形控件的所有想象。

一、jsTree是什么？

jsTree是一个jQuery插件，用于创建交互式树形结构。它支持HTML、JSON、XML三种数据源，具备以下核心特性：

• 拖拽支持（dnd插件）：节点间自由拖拽排序、跨层级移动
• 键盘导航：提升操作效率
• 行内编辑：直接双击修改节点名称
• 三态复选框（checkbox插件）：父节点与子节点联动选中
• 模糊搜索（search插件）：快速定位节点
• 可定制节点类型（types插件）：不同节点使用不同图标和样式
• 异步懒加载：海量数据按需加载，性能无忧

jsTree兼容IE6+及所有现代浏览器，并且完美支持移动端响应式主题。

二、快速上手：3分钟跑起来

1. 引入必要文件

使用CDN是最快捷的方式：

<!-- jQuery (版本需高于1.9.1) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.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静态结构

最简单直接的方式，适合菜单或固定数据：

<div id="tree">
  <ul>
    <li class="jstree-open" id="root_1">根节点
      <ul>
        <li id="child_1">子节点1</li>
        <li id="child_2" data-jstree='{"selected":true}'>子节点2（默认选中）</li>
      </ul>
    </li>
  </ul>
</div>

<script>
$('#tree').jstree();
</script>

通过 data-jstree 属性可以设置节点的初始状态：opened（展开）、selected（选中）、disabled（禁用）、icon（图标）。

方式二：JSON数据

更灵活的方案，适合动态渲染：

$('#tree').jstree({
  'core': {
    'data': [
      {
        'id': 'node_1',
        'text': '根节点',
        'state': { 'opened': true },
        'children': [
          { 'id': 'node_2', 'text': '子节点1' },
          { 
            'id': 'node_3', 
            'text': '子节点2', 
            'icon': 'glyphicon glyphicon-file'  // 支持字体图标
          }
        ]
      }
    ]
  }
});

每个节点对象支持的属性包括：

方式三：AJAX异步加载（重点）

当数据量庞大时，懒加载是必选项。jsTree会在用户展开节点时自动发起请求：

$('#tree').jstree({
  'core': {
    'data': {
      'url': '/api/get_nodes',
      'dataType': 'json',
      'data': function(node) {
        // node.id 为当前展开节点的id，根节点为 '#'
        return { 'id': node.id };
      }
    }
  }
});

后端返回格式示例（首次请求返回根节点）：

[
  {
    "id": 1,
    "text": "根节点",
    "children": [
      { "id": 2, "text": "子节点1" },
      { "id": 3, "text": "子节点2", "children": true }
      // children: true 表示该节点需要懒加载
    ]
  }
]

当用户点击"子节点2"时，jsTree会自动请求 /api/get_nodes?id=3，获取其子节点数据。

3. 事件监听

jsTree采用jQuery事件系统，绑定事件非常自然：

$('#tree')
  .on('changed.jstree', function(e, data) {
    // 节点选中事件
    var selected = data.selected;
    console.log('选中的节点ID:', selected);
  })
  .on('select_node.jstree', function(e, data) {
    // 更细粒度的事件
    var node = data.node;
    console.log('节点文本:', node.text, '节点ID:', node.id);
  })
  .jstree(); // 创建实例

三、插件体系：让树更强大

jsTree的魅力在于其插件体系。通过在 plugins 数组中声明，即可启用相应功能。

复选框（checkbox）

$('#tree').jstree({
  'plugins': ['checkbox'],
  'checkbox': {
    'keep_selected_style': false  // 选中时不改变节点样式
  }
});

拖拽（dnd）

$('#tree').jstree({
  'core': {
    'check_callback': true  // 允许拖拽操作
  },
  'plugins': ['dnd']
});

搜索（search）

$('#tree').jstree({
  'plugins': ['search']
});

// 执行搜索
$('#tree').jstree('search', '关键词');

右键菜单（contextmenu）

$('#tree').jstree({
  'plugins': ['contextmenu'],
  'contextmenu': {
    'items': function(node) {
      return {
        'rename': { 'label': '重命名', 'action': function() { /* ... */ } },
        'delete': { 'label': '删除', 'action': function() { /* ... */ } }
      };
    }
  }
});

四、API调用：操作节点的N种方式

jsTree提供了丰富的API供开发者调用：

// 三种等价调用方式
$('#tree').jstree(true).select_node('node_1');
$('#tree').jstree('select_node', 'node_2');
$.jstree.reference('#tree').select_node('node_3');

// 常用API
$('#tree').jstree('open_node', 'node_id');      // 展开节点
$('#tree').jstree('close_node', 'node_id');     // 折叠节点
$('#tree').jstree('delete_node', 'node_id');    // 删除节点
$('#tree').jstree('create_node', 'parent_id');  // 创建节点
$('#tree').jstree('get_node', 'node_id');       // 获取节点数据
$('#tree').jstree('get_selected');              // 获取所有选中节点

五、进阶配置技巧

自定义主题变体

$('#tree').jstree({
  'core': {
    'themes': {
      'variant': 'large',  // 大号主题
      'dots': false,       // 不显示连接线
      'icons': true        // 显示图标
    }
  }
});

禁用多选

$('#tree').jstree({
  'core': {
    'multiple': false  // 仅允许单选
  }
});

组合多个插件

$('#tree').jstree({
  'core': { 'themes': { 'variant': 'large' } },
  'checkbox': { 'keep_selected_style': false },
  'plugins': ['wholerow', 'checkbox', 'dnd', 'search']
});

jsTree作为一个成熟稳定的树形控件，经过多年迭代，已经覆盖了树形交互的方方面面。无论是简单的静态展示，还是复杂的大数据异步加载，它都能轻松应对。MIT协议也让它可以在商业项目中自由使用。

如果你的项目中需要一个功能全面的树形控件，jsTree值得一试。