首先，我必须通过嵌套列表填充数据。
其次必须编写一个CSS来添加可扩展，可折叠和文件夹的图像，最后点击生成链接。它应该显示完整的扩展树。
var dataSource = ({
"Items": ({
"Deserts": ({}),
"Veg": ({
"VegPulao": "Veg Pulao",
"PalakPaneer": "Palak Paneer",
"PaneerButterMasala": "Paneer Butter Masala"
}),
"Chicken": ({
"Tandoori": "Tandoori special"
}),
"Hot drinks": ({
"Coffe": ({ "Hot": "Hot Coffe", "Medium": "Medium", "Others": ({ "Iris": "Iris Coffe", "Capuccino": "Capuccino" }) }),
"Tea": ({"Red": "Red Tea", "Black": "Black Tea"}),
"BadamMilk": "Hot Badam Milk",
"Bornvita": "Hot Bornvita",
"Milk": "Hot Milk"
}),
"Juice": ({
"Mango": "Mango",
"Berry": "Berry",
"Grapes": "Grapes",
"Wine": ({
"Rose": "Rose",
"Red wine": "Red",
"Apple": "Apple",
"Hard drinks": ({
"Royal challenge": "Royal challenge",
"Blender's Pride": "Blender's Pride"
})
})
})
})
});
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tree Menu</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<a href="" id="mylink" style="font-family:Arial; color:blue; margin:100px;">Generate Sorted List</a><br><br>
<div class="style"></div>
</body>
</html>
CSS代码：
.style{
border:1px solid #A3A3C2;
width:425px;
height:500px;
float:left;
overflow: scroll;
}
#expList .collapsed {
list-style-image: url(../img/plusFolder.jpg);
}
#expList.expanded {
list-style-image: url(../img/minusFolder.jpg);
}
#expList.folder {
list-style-image: url(../img/Folder.jpg);
}
答案 0 :(得分：1)
Using AJAX
You can also use AJAX to populate the tree with JSON your server returns. The format remains the same as the above, the only difference is that the JSON is not inside the config object, but returned from the server.
To take advantage of this option you need to use the $.jstree.defaults.core.data config option.
Just use a standard jQuery-like AJAX config and jstree will automatically make an AJAX request populate the tree with the response.
In addition to the standard jQuery ajax options here you can supply functions for data and url, the functions will be run in the current instance's scope and a param will be passed indicating which node is being loaded, the return value of those functions will be used as URL and data respectively.
If you do not return correct json headers from the server, at least set the dataType jQuery AJAX option to "json".
By Uisng AJAX:
('#tree').jstree({
'core' : {
'data' : {
'url' : function (node) {
return node.id === '#' ?
'ajax_roots.json' :
'ajax_children.json';
},
'data' : function (node) {
return { 'id' : node.id };
}
}
});/ 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配置选项。
$('#using_json').jstree({ 'core' : {
'data' : [
'Simple root node',
{
'text' : 'Root node 2',
'state' : {
'opened' : true,
'selected' : true
},
'children' : [
{ 'text' : 'Child 1' },
'Child 2'
]
}
]
} });
答案 1 :(得分：1)
Using AJAX
You can also use AJAX to populate the tree with JSON your server returns. The format remains the same as the above, the only difference is that the JSON is not inside the config object, but returned from the server.
To take advantage of this option you need to use the $.jstree.defaults.core.data config option.
Just use a standard jQuery-like AJAX config and jstree will automatically make an AJAX request populate the tree with the response.
In addition to the standard jQuery ajax options here you can supply functions for data and url, the functions will be run in the current instance's scope and a param will be passed indicating which node is being loaded, the return value of those functions will be used as URL and data respectively.
If you do not return correct json headers from the server, at least set the dataType jQuery AJAX option to "json".
By Uisng AJAX:
('#tree').jstree({
'core' : {
'data' : {
'url' : function (node) {
return node.id === '#' ?
'ajax_roots.json' :
'ajax_children.json';
},
'data' : function (node) {
return { 'id' : node.id };
}
}
});/ 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配置选项。
$('#using_json').jstree({ 'core' : {
'data' : [
'Simple root node',
{
'text' : 'Root node 2',
'state' : {
'opened' : true,
'selected' : true
},
'children' : [
{ 'text' : 'Child 1' },
'Child 2'
]
}
]
} });
Using functions:
You can supply a function too. That function will receive two arguments - the node being loaded and a callback function to call with the children for that node once you are ready.
$('#tree').jstree({
'core' : {
'data' : function (obj, cb) {
cb.call(this,
['Root 1', 'Root 2']);
}
}});