使用 JSON 填充树

优质

小牛编辑

133浏览

2023-12-01

格式

jsTree需要特定的格式才能使用JSON。在标准语法中，不需要任何字段-仅传递您需要的内容。请记住，您将能够访问您指定的任何其他属性-jsTree不会触及它们，以后您将能够使用它们（original在每个节点上使用该属性）。

要更改节点的图标，请使用icon属性。指定包含的字符串/将显示该图像作为节点图标。使用任何其他字符串将把该类<i>应用于用于表示图标的元素。您可以使用布尔值false使jsTree渲染不带图标的节点。

您可以使用该state属性在节点上设置状态。使用以下的任意组合：opened, selected, disabled.

双方li_attr 和 a_attr直接传递到jQuery的ATTR功能。

当使用设置children为boolean的AJAX时true，jsTree会将节点呈现为关闭状态，并在用户打开该节点时对该节点发出附加请求。

任何嵌套的子代都应该是遵循相同格式的对象，或者是纯字符串（在这种情况下，该字符串用于节点的文本，其他所有东西都是自动生成的）。

// Expected format of the node (there are no required fields)
{
  id          : "string" // will be autogenerated if omitted
  text        : "string" // node text
  icon        : "string" // string for custom
  state       : {
    opened    : boolean  // is the node open
    disabled  : boolean  // is the node disabled
    selected  : boolean  // is the node selected
  },
  children    : []  // array of strings or objects
  li_attr     : {}  // attributes for the generated LI node
  a_attr      : {}  // attributes for the generated A node
}

可选的 JSON 格式

如果您不想使用嵌套children方法，则可以使用备用语法，其中每个节点对象都有两个必填字段：id & parent 和没有children属性（其他所有内容保持不变）。

jsTree将自动构建层次结构。为了指示节点应该是根节点，请将其parent 属性设置为 "#".

主要在一次渲染整棵树时使用，当使用邻接关系将数据存储在数据库中时，这很有用。

// Alternative format of the node (id & parent are required)
{
  id          : "string" // required
  parent      : "string" // required
  text        : "string" // node text
  icon        : "string" // string for custom
  state       : {
    opened    : boolean  // is the node open
    disabled  : boolean  // is the node disabled
    selected  : boolean  // is the node selected
  },
  li_attr     : {}  // attributes for the generated LI node
  a_attr      : {}  // attributes for the generated A node
}

使用 JSON

要用JSON对象填充树，您需要使用$.jstree.defaults.core.data 配置选项

期望的格式是节点数组，其中每个节点都应该是如上所述的对象或简单的字符串（在这种情况下，该字符串用于节点的text属性，其他所有内容都是自动生成的）。嵌套节点children的父属性以相同的方式提供。

$('#using_json').jstree({ 'core' : {
    'data' : [
       '简单的根节点',
       {
         'text' : '根节点 2',
         'state' : {
           'opened' : true,
           'selected' : true
         },
         'children' : [
           { 'text' : '子 1' },
           '子 2'
         ]
      }
    ]
} });

使用其他 JSON 格式

$('#using_json_2').jstree({ 'core' : {
    'data' : [
       { "id" : "ajson1", "parent" : "#", "text" : "简单的根节点" },
       { "id" : "ajson2", "parent" : "#", "text" : "根节点 2" },
       { "id" : "ajson3", "parent" : "ajson2", "text" : "子 1" },
       { "id" : "ajson4", "parent" : "ajson2", "text" : "子 2" },
    ]
} });

使用 AJAX

您还可以使用AJAX用服务器返回的JSON填充树。格式与上面相同，唯一的区别是JSON不在config对象内部，而是从服务器返回的。

要利用此选项，您需要使用$.jstree.defaults.core.data 配置选项.

只需使用类似jQuery的标准AJAX配置，jstree就会自动使AJAX请求填充响应。

除了此处的标准jQuery ajax选项之外，您还可以为data 和 url，这些函数将在当前实例的范围内运行，并且将传递参数以指示要加载的节点，这些函数的返回值将用作URL。和数据。

如果您没有从服务器返回正确的json标头，则至少将dataTypejQuery AJAX选项设置为"json".


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

使用回调

您也可以提供的回调方法。该函数将接收两个参数，正在加载的节点，以及准备就绪后将使用该节点的子代调用的回调函数。


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