使用 HTML 填充树

基本标记

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

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

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

有子节点的节点

要创建带有子节点的节点，请 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选项之外，您还可以为data 和 url，这些函数将在当前实例的范围内运行，并且将传递参数以指示要加载的节点，这些函数的返回值将用作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>