使用jsTree树形控件【4】

用户2936342

发布于 2018-08-27 15:17:46

2.1K0

发布于 2018-08-27 15:17:46

文章被收录于专栏：nummynummy

标准JSON格式

使用JSON渲染jsTree的话，需要指定JSON的格式，jsTree可以使用两种JSON格式，在标准JSON格式中，没有必需的属性，而且还可以添加自定义的属性。具体格式说明如下：

// 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格式

上面的标准格式中，子节点是嵌套在父节点中的，如果是有多级节点，结构就会比较复杂，这时可以选用另一种JSON格式，在这种格式中，两个属性是必须有的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进行渲染

使用$.jstree.defaults.core.data配置参数来渲染JSON对象。标准JSON格式

$('#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数据，然后进行渲染，一样的使用$.jstree.defaults.core.data进行配置，如果不能从服务器端获取正确的JSOn内容，记得设置dataType为json。

使用函数

还可以给data属性赋值为一个函数，这个函数接收两个参数，一个是正在加载的节点对象，一个是回调函数，回调函数返回子节点信息。

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2016.03.04 ，如有侵权请联系 cloudcommunity@tencent.com 删除

ajax