什么是jsTree?

jsTree 是一个jquery 插件, 提供交互式树.它是完全免费的,开源的,并根据MIT许可进行分发。jsTree易于扩展,可定义和配置,它支持HTML和JSON数据源以及AJAX加载。

jsTree可以在盒子模型(内容框或边框)中正常运行,可以作为AMD模块加载,并具有用于响应式设计的内置移动主题,可以轻松自定义。它使用jQuery的事件系统,因此对树中各种事件的绑定回调是熟悉且容易的。

仅有的一些功能值得注意:

  • 拖放支持
  • 键盘导航
  • 内联编辑,创建和删除
  • 三态复选框
  • 模糊搜索
  • 可定制的节点类型


Chrome 14+, Firefox 3.5+, Opera 12+, Safari 4+, IE8+
以上的旧版本可能可以运行,但未经测试


  下载

  • 根节点 1
    • 最初 选择
    • 自定义图标网址
    • 最初开放
      • 另一个节点
    • 自定义图标类 (bootstrap)
  • 根节点 2

入门-一切一目了然

  1. 下载jsTree 或使用CDNJS

    如果您选择下载-您需要的所有文件都在dist/下载文件夹中

  2. 包括一个jsTree主题

    主题也可以被自动加载,但最好是包含CSS文件以提高性能。

    如果自己托管文件:

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

    如果使用CDNJS:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
  3. 设置一个容器

    这是您希望树出现的元素,一个<div>就足够了。<ul>由于没有配置其他数据源(例如JSON),因此此示例具有嵌套。

      <div id="jstree_demo_div"></div>
  4. 包含jQuery

    jsTree 在您的网页中需要1.9.0或更高版本。您可以使用CDN版本或包含本地副本。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
  5. 包含jsTree

    如果您自己托管文件:用于生产的版本包括最小版本:dist/jstree.min.js,则还有一个开发版本:dist/jstree.js

    <script src="dist/jstree.min.js"></script>

    如果使用CDNJS:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
  6. 创建一个实例

    DOM准备就绪后,您可以开始创建jstree实例。

    $(function () { $('#jstree_demo_div').jstree(); });
  7. 监听事件

    当用户(或您)与树交互时发生某些更改时,jsTree使用事件通知您。因此,绑定到jstree事件就像绑定到单击一样容易。有一个事件的名单,他们的API文档中提供的信息和。

    $('#jstree_demo_div').on("changed.jstree", function (e, data) {
      console.log(data.selected);
    });
  8. 与您的实例互动

    实例准备好后,您可以在其上调用方法。API文档中有可用方法的列表。下面的三个示例做同样的事情

    $('button').on('click', function () {
      $('#jstree').jstree(true).select_node('child_node_1');
      $('#jstree').jstree('select_node', 'child_node_1');
      $.jstree.reference('#jstree').select_node('child_node_1');
    });


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jsTree test</title>
  <!-- 2 包含主题模板CSS文件 -->
  <link rel="stylesheet" href="dist/themes/default/style.min.css" />
</head>
<body>
  <!-- 3 设置容器元素 -->
  <div id="jstree">
    <!-- 在本例中,树是从内联HTML填充的 -->
    <ul>
      <li>根节点 1
        <ul>
          <li id="child_node_1">子节点1</li>
          <li>子节点2</li>
        </ul>
      </li>
      <li>根节点 2</li>
    </ul>
  </div>
  <button>演示按钮</button>

  <!-- 4 包含jQuery库 -->
  <script src="dist/libs/jquery.js"></script>
  <!-- 5 包括缩小的jstree源文件 -->
  <script src="dist/jstree.min.js"></script>
  <script>
  $(function () {
    // 6 当DOM准备好时创建一个实例
    $('#jstree').jstree();
    // 7 绑定到树上触发的事件
    $('#jstree').on("changed.jstree", function (e, data) {
      console.log(data.selected);
    });
    // 8 与树交互-任何一种方式都可以
    $('button').on('click', function () {
      $('#jstree').jstree(true).select_node('child_node_1');
      $('#jstree').jstree('select_node', 'child_node_1');
      $.jstree.reference('#jstree').select_node('child_node_1');
    });
  });
  </script>
</body>
</html>