使用 HTML 数据填充结构树

基本用法

jsTree 可以将标准的无序列表转换为结构树。最低标准只要求一个 <ul> 节点并在其中包含几个只有简单文本的 <li> 节点。

另外你还要有一个用来封装 <ul> 的容器，我们会在该容器上创建实例。比如：$('#html1').jstree();。

<div id="html1">
  <ul>
    <li>Root node 1</li>
    <li>Root node 2</li>
  </ul>
</div>

子节点

若需要创建子节点，只要简单地在 <li> 节点中再嵌套一个 <ul> 即可。

jsTree 会在内部把节点中的文本转换成链接，而节点内容已经是一个链接的，则不做额外处理。比如下面例子中的 Child node 2。

另外，jsTree 中单击链接是不跳转到 href 所指定的地址的。如果你想要实现点击跳转，你需要监听 changed.jstree 事件，在事件回调中执行跳转。

更多内容请参阅我们文档中的事件章节。

<div id="html1">
  <ul>
    <li>Root node 1
      <ul>
        <li>Child node 1</li>
        <li><a href="#">Child node 2</a></li>
      </ul>
    </li>
  </ul>
</div>

class 方式设置初始状态

可以通过在 <a> 元素中添加一个 jstree-clicked class 从而让节点默认以 selected 状态进行初始化。

同样地，在 <li> 元素中加入 jstree-open class 则是让节点默认为展开状态，这样其子节点在初始化时便是可见状态。

最好为每个节点赋予其唯一 id（在 <li> 元素中添加 id 属性），这样，你在与后端交互时就很有用了，因为触发的任何 jsTree 事件都能拿到其节点 ID 了。

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

data 属性方式设置初始状态

你也可以通过 data-jstree 属性设置一个节点的初始状态。

以下的任意组合都是可用的：opened，selected，disabled，icon。

节点 icon 若设为一个文件地址（只要字符串中含有 /）则能够将对应的图片作为节点的图标。而使用一个纯字符串的话，节点 icon 则会把它转为 <i> 元素的 class。

举个例子，如果你的框架使用的是 Twitter Bootstrap，那使用 "icon" : "glyphicon glyphicon-leaf" 的话就会显示叶子作为图标。

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

使用 AJAX 加载数据

你也可以使用 AJAX 将服务端返回的 HTML 数据填充到结构树中。响应的数据格式要和前述的保持一致，唯一不同的是数据来自服务端，它不是固定在页面上。

进一步说明一下，该功能需要用到 $.jstree.defaults.core.data 配置项。

只需使用一个标准的 jQuery 风格的 AJAX 配置，jsTree 就能自动进行 AJAX 请求并把响应内容填充到结构树。

在返回的数据中你需要给每一个 LI 节点加上 jstree-closed class，而且其中不要再嵌套 UL 节点，否则 jsTree 会在用户打开该节点时立即再进行一次 AJAX 请求。

除了标准的 jQuery ajax 选项之外，在这里你还可以为 data 和 url 提供函数。这些函数将在当前实例的作用域中运行，其中会传递一个参数，该参数指示正在加载的那个节点。最后，函数的返回值则分别作为 URL 和 data 的最终配置值。

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

// Example response:
<ul>
<li>Node 1</li>
<li class="jstree-closed">Node 2</li>
</ul>