• 使用 JSON 填充树
    • 格式
    • 可选的 JSON 格式
    • 使用 JSON
    • 使用可选的 JSON 格式
    • 使用 AJAX
    • 使用函数

    使用 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.     }});