[TOC]

用 HTML 来填充树

基本使用

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

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

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

子节点

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

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

关于事件，请见API 页面。

用 CSS class 设置初始状态

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

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

建议为每个

  • 设置唯一的id属性，在 jstree 的某些事件中，通过这些 id，可以很方便进行相关的操作。

    …

    用data属性设置初始状态

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

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

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

    "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 还提供了data和url。这两个选项的值可以是一个函数，函数将在实例范围内执行，并接收 1 个参数（正在加载的节点），函数的返回值作为这两个配置项各自最终的值。

    $('#tree').jstree({