jstree--使⽤JSON数据组装成树
概述：
前⾯主要是html数据，这⾥主要是json数组
1.格式
jsTree需要⼀个具体格式JSON数据，在标准的语法没有那个字段是必须的-⽽是那些是你需要的。请记住你可以获取任何你请求的其他属性，jsTree将会不会碰他们，你将有可能在随后使⽤它们。
为了改变节点的图标你可以是⽤属性icon。具体的字符串需要包含/的⼀个图⽚的url路径，你可以使⽤任何其它字符串应⽤类样式去修
饰<i>元素，它将会被⽤呈现这个图标。你可以使⽤boolean 值false来jsTree在渲染节点时没有图标。
你可以设置⼀个节点的状态使⽤state属性，它值可以使如下值得组合：opened, selected, disabled.
li_attr和a_attr可以直接通过jQuery属性函数获取。
当使⽤AJAX设置children为false，jsTree将会将渲染这个节点为关闭状态，如果需要打开的时候需要发
送额外的请求。
如何内部children都应该遵循相同的格式，或者是普通字符串(这个字符串作为普通⽂本和任何其它⾃动⽣成的)
// 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
}
2.可选择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
}
3.使⽤JSON
jquery的attr属性为了使⽤JSON来渲染⼀棵树，你需要使⽤$.data配置选项
这个希望格式为⼀个数组节点。每个节点应该是⼀个如上所描述的对象或者是⼀个简单的字符串（这种情况字符串被⽤来作为⼀个节点的⽂本替换⾃动⽣成的⽂本），任何内部⼦节点格式是⼀样的。
$('#using_json').jstree({ 'core' : {
'data' : [
'Simple root node',
{
'text' : 'Root node 2',
'state' : {
'opened' : true,
'selected' : true
},
'children' : [
{ 'text' : 'Child 1' },
'Child 2'
]
}
]
} });
4.使⽤可选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" },
]
} });
5.使⽤AJAX
你可以使⽤AJAX向服务器请求返回⼀个json数据来渲染树，这个格式如上所⽰，这⾥唯⼀不同就是JSON是不可见，它是服务器返回的。
为了使⽤这个特性，你需要使⽤$.data 配置选项
仅仅是使⽤标准jQuery像AJAX配置和jstree将会⾃动做出⼀个AJAX请求⽽返回数据。
除了标准jQuery ajax选项，你可以提供data函数和url路径，这个功能将会运⾏当前的实例范围内，⼀个参数被通过表明这个节点被加载了，这个返回值将会⽤作各⾃的URL和data
如果你并不会返回json头部信息，⾄少设置数据类型 jQuery 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 };
}
}
});
6.使⽤函数
你可以提供⼀个函数，这个函数将会接受两个参数，节点加载和回调函数。
$('#tree').jstree({
'core' : {
'data' : function (obj, cb) {
cb.call(this,
['Root 1', 'Root 2']);
}
}});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。