强大的动态树插件与jQuery - jsTree

最新推荐文章于 2026-05-17 13:26:42 发布

原创

最新推荐文章于 2026-05-17 13:26:42 发布 · 6.1k 阅读

jsTree是一款强大的jQuery插件，提供动态树视图功能，包括内联编辑、拖放、复选框和键盘导航。支持HTML和JSON数据、AJAX加载、自定义图标，具备延迟加载、搜索过滤和丰富的回调函数。本文将介绍其基本用法和更新日志。

jsTree是一个功能强大的jQuery插件，用于生成动态的交互式树视图（例如文件夹树），支持内联编辑，拖放，复选框，键盘导航等。

>>>演示 >>>下载

基本用法：

1.安装和下载。

# NPM
$ npm install jstree --save

2.在文档中导入您选择的主题CSS。

<link rel="stylesheet" href="themes/default/style.min.css">
<link rel="stylesheet" href="themes/default-dark/style.min.css">

3.将jQuery库和jsTree插件的脚本导入到文档中。

<script src="/https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="jstree.min.js"></script>

4.从HTML数据生成树结构。

<div id="html" class="demo">
  <ul>
    <li data-jstree='{ "opened" : true }'>Root node
      <ul>
        <li data-jstree='{ "selected" : true }'>Child node 1</li>
        <li>Child node 2</li>
      </ul>
    </li>
  </ul>
</div>

5.从内联数据生成树结构。

<div id="data" class="demo"></div>

6.通过AJAX从外部JSON文件生成树结构。

$('#ajax').jstree({
  'core' : {
    'data' : {
      "url" : "./root.json",
      "dataType" : "json" // needed only if you do not supply JSON headers
    }
  }
});

7.所有默认配置选项。

/**
 * data configuration
 *
 * If left as `false` the HTML inside the jstree container element is used to populate the tree (that should be an unordered list with list items).
 *
 * You can also pass in a HTML s