首先，我必须通过嵌套列表填充数据。
其次必须编写一个 CSS 来添加可展开、可折叠和文件夹的图像，最后单击生成链接。它应该显示完整的伸展树(Splay Tree)。
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);
}
最佳答案
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'
]
}
]
} });关于jquery - 如何使用 jQuery 根据输入 JSON 生成树？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33470433/