使用 JSON 填充树

格式

jsTree 有一种约定的 JSON 格式。
在标准的语法中，没有任何字段是必须的，你可添加任意的字段。
你可访问任何你添加进去的字段，jsTree 不会修改你传入的数据，
因此你可在后续操作中访问原来的字段数据。

icon用于为节点设置图标，值是字符串。

  • 字符串包含/，则认为是一个图片文件。
  • 字符串不包含/，则认为是 CSS 的 class（<i>的类）。
  • false，则禁用节点图标。

state用于指定节点的状态，可使用下面选项的任意组合：opened selected disabled。

li_attr和a_attr都直接传递给 jQuery 的attr()函数。

当使用 AJAX 时，若children的值为布尔值true，则 jsTree 会将节点渲染为已关闭。
当用户点开此节点时，才会再次发起 AJAX 请求获取对应的数据。

任何嵌套的子节点，都应是

  • 遵循相同的格式对象
  • 或，普通字符串（此字符串用做节点名，其他的节点属性都自定生成）
  1. // Expected format of the node (there are no required fields)
  2. {
  3.   id          : "string" // will be autogenerated if omitted
  4.   text        : "string" // node text
  5.   icon        : "string" // string for custom
  6.   state       : {
  7.     opened    : boolean  // is the node open
  8.     disabled  : boolean  // is the node disabled
  9.     selected  : boolean  // is the node selected
  10.   },
  11.   children    : []  // array of strings or objects
  12.   li_attr     : {}  // attributes for the generated LI node
  13.   a_attr      : {}  // attributes for the generated A node
  14. }

可选的 JSON 格式

若不想使用嵌套children的方法，可使用另一个方法：

  • 每个节点仅有id和parent字段
  • 每个节点均没有children字段

jsTree 会自动解释继承关系。
若是根节点，则只需设置其parent字段为#。

此方法适用于一次性加载整棵树，或存储数据到数据库。

  1. // Alternative format of the node (id & parent are required)
  2. {
  3.   id          : "string" // required
  4.   parent      : "string" // required
  5.   text        : "string" // node text
  6.   icon        : "string" // string for custom
  7.   state       : {
  8.     opened    : boolean  // is the node open
  9.     disabled  : boolean  // is the node disabled
  10.     selected  : boolean  // is the node selected
  11.   },
  12.   li_attr     : {}  // attributes for the generated LI node
  13.   a_attr      : {}  // attributes for the generated A node
  14. }

使用 JSON

用 JSON 格式数据生成一棵树，需对$.jstree.defaults.core.data进行配置。

格式应是一个节点数组，每个节点都是一个对象或一个普通字符串（此时字符串仅作为节点名，其他节点属性将自动生成）。
任何嵌套的节点都应以相同的格式放在其父节点的children字段中。

  1. $('#using_json').jstree({ 'core' : {
  2.     'data' : [
  3.        'Simple root node',
  4.        {
  5.          'text' : 'Root node 2',
  6.          'state' : {
  7.            'opened' : true,
  8.            'selected' : true
  9.          },
  10.          'children' : [
  11.            { 'text' : 'Child 1' },
  12.            'Child 2'
  13.          ]
  14.       }
  15.     ]
  16. } });

使用可选的 JSON 格式

  1. $('#using_json_2').jstree({ 'core' : {
  2.     'data' : [
  3.        { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
  4.        { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
  5.        { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
  6.        { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
  7.     ]
  8. } });

使用 AJAX

可通过 AJAX 从服务器获取 JSON 数据来构建树。
JSON 格式如前面所述，唯一不同的是 JSON 不是来自配置对象，而是来自服务器。

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

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

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

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

若服务器响应的头不是 JSON 类型，则应至少设值 jQuery AJAX 的选项dataType为json。

  1. $('#tree').jstree({
  2. 'core' : {
  3.   'data' : {
  4.     'url' : function (node) {
  5.       return node.id === '#' ?
  6.         'ajax_roots.json' :
  7.         'ajax_children.json';
  8.     },
  9.     'data' : function (node) {
  10.       return { 'id' : node.id };
  11.     }
  12.   }
  13. });

使用函数

还可提供一个函数。
此函数接收 2 个参数：

  • 被加载的节点
  • 一个回调函数，此回调函数接收包含子节点信息的参数
  1. $('#tree').jstree({
  2.     'core' : {
  3.         'data' : function (obj, cb) {
  4.             cb.call(this,
  5.               ['Root 1', 'Root 2']);
  6.         }
  7.     }});