使用 JSON 数据填充结构树

数据格式

jsTree 应用 JSON 需要按照一种特定的格式。在该格式中，所有字段都是选填项，你只需要填入你用得到的字段。另外，你可以访问任何你额外设定的字段，jsTree 不会去动它们，你也能够在后期继续使用它们（后续的调用中，你可以在节点的 original 字段中找到你所扩展的内容）。

要设置节点图标，请使用 icon 字段。若是一个包含 / 的字符串，会以文件路径对应的图像作为节点图标。若是其他字符串则会将其作为图标 <i> 元素的 class。还有一种情况就是设为 false，表示该节点禁用图标。

设置节点上的状态你可以使用 state 字段。以下选项的任意组合方式都是可行的：opened、selected、disabled。

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

当使用 AJAX 时，若 children 设置为 true，jsTree 渲染时会将该节点渲染为折叠状态，并在用户点击展开节点时进行 AJAX 请求获取子节点的数据。

任何嵌套的子节点要么是一个遵循相同格式的对象，要么是纯字符串（这种情况下，该字符串会作为节点名称，其他属性内容则都自动生成）。

// 节点的格式要求（所有字段都是选填项）
{
  id          : "string" // 如果省略，将自动生成
  text        : "string" // 节点名称
  icon        : "string" // 自定义字符串
  state       : {
    opened    : boolean  // 节点是否展开
    disabled  : boolean  // 节点是否禁用
    selected  : boolean  // 节点是否被选中
  },
  children    : []  // 字符串或对象数组
  li_attr     : {}  // 节点 LI 元素的自定义属性
  a_attr      : {}  // 节点 A 元素的自定义属性
}

JSON 备选格式

如果你不想使用嵌套 children 的方法，你可以使用一种替代格式。在这种格式中，每个节点都必须有两个必填字段：id 和 parent，同时不能存在 children 字段（其他均保持不变）。

jsTree 会自动建立层次结构。关于根节点的 parent 字段，请设为 "#"。

这种方式主要适用于当你想一次性渲染整颗结构树的时候。另外，当数据以邻接表结构存储在数据库中的情况，也是很合适的。

// 节点的替代格式（id 和 parent 是必填的）
{
  id          : "string" // 必填
  parent      : "string" // 必填
  text        : "string" // 节点名称
  icon        : "string" // 自定义字符串
  state       : {
    opened    : boolean  // 节点是否展开
    disabled  : boolean  // 节点是否禁用
    selected  : boolean  // 节点是否被选中
  },
  li_attr     : {}  // 节点 LI 元素的自定义属性
  a_attr      : {}  // 节点 A 元素的自定义属性
}

使用 JSON

要使用 JSON 对象填充结构树，你需要设置 $.jstree.defaults.core.data 配置项。

从格式要求而言，该配置得是一个节点数组，其中每个节点应是一个上文所述的对象或一个简单字符串（在这种情况下，该字符串会作为节点的 text 字段，而其他内容则自动生成）。任何嵌套的节点都应以相同的方式放在其父节点的 children 字段中。

$('#using_json').jstree({ 'core' : {
    'data' : [
       'Simple root node',
       {
         'text' : 'Root node 2',
         'state' : {
           'opened' : true,
           'selected' : true
         },
         'children' : [
           { 'text' : 'Child 1' },
           'Child 2'
         ]
      }
    ]
} });

使用 JSON 备选格式

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

使用 AJAX

你还可以利用 AJAX 将服务端返回的 JSON 格式数据填充到结构树中。当然，该格式需与上述相同，唯一的区别是那些 JSON 数据不存在配置对象中，而是从服务端返回的。

还有，该功能需要设置 $.jstree.defaults.core.data 配置项来实现。

只需使用一个标准的 jQuery 风格的 AJAX 配置，jsTree 就能自动进行 AJAX 请求并把响应内容填充到结构树。

除了标准的 jQuery ajax 选项之外，在这里你还可以为 data 和 url 提供函数。这些函数将在当前实例的作用域中运行，其中会传递一个参数，该参数指示正在加载的那个节点。最后，函数的返回值则分别作为 URL 和 data 的最终配置值。

如果你服务端无法返回正确的 json 标头，那至少要把 jQuery AJAX 的 dataType 选项设置为 "json"。

$('#tree').jstree({
'core' : {
  'data' : {
    'url' : function (node) {
      return node.id === '#' ?
        'ajax_roots.json' :
        'ajax_children.json';
    },
    'data' : function (node) {
      return { 'id' : node.id };
    }
  }
});

使用函数

你还可以提供一个函数，该函数接收 2 个参数 - 被加载的节点和一个回调函数，该回调可以用来调取子节点。

$('#tree').jstree({
    'core' : {
        'data' : function (obj, cb) {
            cb.call(this, ['Root 1', 'Root 2']);
        }
    }
});