什么是jsTree?

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

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

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

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


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


  下载

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

使用HTML填充树

基本标记

jsTree可以将常规无序列表变成树。所需的最小标记是一个<ul>带有嵌套<li>节点的节点,其中嵌套了一些文本。

您应该有一个包装的容器,<ul>并在该容器上创建实例。像这样:
$('#html1').jstree();.

<div id="html1">
  <ul>
    <li>根节点 1</li>
    <li>根节点 2</li>
  </ul>
</div>
  • 根节点 1
  • 根节点 2

有子节点的节点

要创建带有子节点的节点,请simpy嵌套一个<ul>.

在内部jstree会将文本转换为链接,因此如果标记tree中已经存在链接,则不会在意。喜欢子节点 2.
但是,单击链接不会将用户定向到新页面,而是要拦截changed.jstree事件并采取相应措施。

继续阅读有关处理事件的部分。

<div id="html1">
  <ul>
    <li>根节点 1
      <ul>
        <li>子节点 1</li>
        <li><a href="#">子节点 2</a></li>
      </ul>
    </li>
  </ul>
</div>

用类设置初始状态

要使节点最初处于选中状态,可以jstree-clicked<a>元素上设置类。

同样,您可以jstree-open在任何<li>元素上设置类,以使其最初扩展,以便其子级可见。

最好通过将属性添加到任何元素来为节点提供唯一的id。如果您需要与后端同步,这将很有用,因为您将在jstree触发器的任何事件中获取ID。<li>

…
<li class="jstree-open" id="node_1">根
  <ul>
    <li>
      <a href="#" class="jstree-clicked">子</a>
    </li>
  </ul>
</li>
…

使用数据属性设置初始状态

您也可以使用data-jstree属性在节点上设置状态。

您可以使用以下任何组合:opened, selected, disabled, icon.

指定地址(任何包含的地址/)都会将该图像显示为节点图标。使用字符串会将该类<i>应用于用于表示图标的元素。
例如,如果您使用的是Twitter Bootstrap,则可以"icon" : "glyphicon glyphicon-leaf"用来显示叶子图标。

<li data-jstree='{"opened":true,"selected":true}'>根
  <ul>
    <li data-jstree='{"disabled":true}'>子</li>
    <li data-jstree='{"icon":"../tree.png"}'>
      子</li>
    <li data-jstree='{"icon":"glyphicon glyphicon-leaf"}'>
      子</li>
  </ul>
</li>

用AJAX加载

您还可以使用AJAX用服务器返回的HTML填充树。格式与上面相同,唯一的区别是HTML不在容器内,而是从服务器返回。

要利用此选项,您需要使用$.jstree.defaults.core.data配置选项

只需使用类似jQuery的标准AJAX配置,jstree就会自动使AJAX请求填充响应。

jstree-closed向您返回的任何LI节点添加一个类,并且不嵌套UL节点,并且一旦用户打开该节点,jstree就会进行另一个AJAX调用。

除了此处的标准jQuery ajax选项之外,您还可以为dataurl,这些函数将在当前实例的范围内运行,并且将传递参数以指示要加载的节点,这些函数的返回值将用作URL。和数据。

$('#tree').jstree({
  'core' : {
    'data' : {
      'url' : 'ajax_nodes.html',
      'data' : function (node) {
        return { 'id' : node.id };
      }
    }
  }
});

// 演示源码:
<ul>
<li>节点 1</li>
<li class="jstree-closed">节点 2</li>
</ul>
www.jstree.com.cn    jstree中文网    [英文站]