用 HTML 来填充树

基本使用

jsTree 可自动转换一个标准的无序列表为一棵树。
最低要求是包含 1 个ul并内嵌几个包含名称的li

  1. <div id="html1">
  2. <ul>
  3. <li>Root node 1</li>
  4. <li>Root node 2</li>
  5. </ul>
  6. </div>

你应以一个容器包围ul,并在此容器上创建实例,如:

  1. $('#html1').jstree();

子节点

若需创建子节点,只需继续内嵌ul

  1. <div id="html1">
  2. <ul>
  3. <li>Root node 1
  4. <ul>
  5. <li>Child node 1</li>
  6. <li><a href="#">Child node 2</a></li>
  7. </ul>
  8. </li>
  9. </ul>
  10. </div>

在 jstree 内部,默认会将文本转换成一个链接<a>
若本身已存在一个<a>(如上述的Child node 2),并不受影响,
因为 jstree 设置为不自动跳转到对应的链接,而是触发一个名为changed.jstree的事件,
你可监听此事件来做想做的事。

关于事件,请见API 页面

用 CSS class 设置初始状态

若想一个节点默认被选中,只需为<a>添加一个jstree-clicked类即可。

类似的,还可在li中添加jstree-open类,使得节点展开,可见其子节点。

建议为每个<li>设置唯一的id属性,在 jstree 的某些事件中,通过这些 id,可以很方便进行相关的操作。

  1. <li class="jstree-open" id="node_1">
  2. <ul>
  3. <li>
  4. <a href="#" class="jstree-clicked">Child</a>
  5. </li>
  6. </ul>
  7. </li>

data属性设置初始状态

可通过data-jstree属性来设置一个节点的状态。

属性中支持的组合包括:opened selected disabled icon

  1. <li data-jstree='{"opened":true,"selected":true}'>
  2. <ul>
  3. <li data-jstree='{"disabled":true}'>Child</li>
  4. <li data-jstree='{"icon":"//jstree.com/tree.png"}'>
  5. Child</li>
  6. <li data-jstree='{"icon":"glyphicon glyphicon-leaf"}'>
  7. Child</li>
  8. </ul>
  9. </li>

指定一个图片文件地址(任何包含/的字符串),可以在节点上显示图标。
也可通过填入 CSS class 名来设置图标。
例如,下面将设置一个 Twitter Bootstrap 的叶子图标:

  1. "icon" : "glyphicon glyphicon-leaf"

通过 AJAX 加载数据

可通过 AJAX 的响应的 HTML 数据来填充树。
响应的 HTML 格式与前面所述的一致,不同的仅是数据来源于后台服务器而已。

可通过配置$.jstree.defaults.core.data来更好使用此功能。

只需使用类似 jQuery AJAX 的配置,jstree 即可自动发送 AJAX 请求来获取填充树的数据。

请在响应数据的每个LI中添加jstree-closed类,且不要在其中再嵌套UL
因为 jstree 会自动发起另外的 AJAX 请求来请求嵌套的节点数据。

除了标准的 jQuery AJAX 配置项,jstree 还提供了dataurl
这两个选项的值可以是一个函数,函数将在实例范围内执行,并接收 1 个参数(正在加载的节点),
函数的返回值作为这两个配置项各自最终的值。

  1. $('#tree').jstree({
  2. 'core' : {
  3. 'data' : {
  4. 'url' : 'ajax_nodes.html',
  5. 'data' : function (node) {
  6. return { 'id' : node.id };
  7. }
  8. }
  9. }
  10. });
  11. // Example response:
  12. <ul>
  13. <li>Node 1</li>
  14. <li class="jstree-closed">Node 2</li>
  15. </ul>