使用复选框将数据从 JSON 文件加载到树中
Loading data from JSON file into Tree with checkboxes
我正在尝试为我的 Web 应用程序创建一个扩展树,但我无法从 JSON 文件中获取数据来动态填充树。我从 SOF 上的另一篇帖子中找到了这段代码。这是我的JSON文件tree_data.json:
{
"Data": {
"id": "0",
"title": "root-not displayed",
"children": {
"id": "1",
"title": "Option 1",
"children": {
"id": "11",
"title": "Option 11",
"children": {
"id": "111",
"title": "Option 111",
"id": "112",
"title": "Option 112"
}
}
}
}
}
以下是嵌入在HTML中的javascript代码:
$.getJSON("tree_data.json", function(treedata) ){
//$.each(treedata.data, function(i, field){
$(function () {
addItem($('#root'), treedata); //first call to add item which passes the main parent/root.
$(':checkbox').change(function () {
$(this).closest('li').children('ul').slideToggle();
});
$('label').click(function(){
$(this).closest('li').find(':checkbox').trigger('click');
});
});//}
function addItem(parentUL, branch) {
for (var key in branch.children) { //for each key in child in data
var item = branch.children[key]; //assign each child in variable item
$item = $('<li>', { //jquery object
id: "item" + item.id
});
$item.append($('<input>', { //add check boxes
type: "checkbox",
id: "item" + item.id,
name: "item" + item.id
}));
$item.append($('<label>', { //add labels to HTML. For every id, display its title.
for: "item" + item.id,
text: item.title
}));
parentUL.append($item);
if (item.children) {
var $ul = $('<ul>', {
style: 'display: none'
}).appendTo($item);
$item.append();
addItem($ul, item); //recursive call to add another item if there are more children.
}
}
}}
我需要很多帮助来更改此代码,以便获取 JSON 数据并创建树。任何帮助将不胜感激。谢谢。
首先,您必须将每个子对象封装在 json 数组中,这样每个子对象中都可以有单个或多个对象(如 111 和 112)。因此,将 json 更改为这样:
{
"Data": {
"id": "0",
"title": "root-not displayed",
"children": [{
"id": "1",
"title": "Option 1",
"children": [{
"id": "11",
"title": "Option 11",
"children": [{
"id": "111",
"title": "Option 111"
},
{
"id": "112",
"title": "Option 112"
}]
}]
}]
}
}
现在,有一个工作代码库(带有工作示例):
$(function () {
var treedata = JSON.parse('{"Data": {"id": "0","title": "root-not displayed","children": [{ "id":"1","title":"Option 1","children": [{"id": "11","title": "Option 11","children": [{"id": "111","title": "Option 111"},{"id": "112","title": "Option 112"}]}]}]}}'); //JUST FOR MOCKUP THE JSON CALL
addItem($('#root'), treedata.Data); //first call to add item which passes the main parent/root.
$(':checkbox').change(function () {
$(this).closest('li').children('ul').slideToggle();
});
$('label').click(function(){
$(this).closest('li').find(':checkbox').trigger('click');
});
});//}
function addItem(parentUL, branch) {
$.each(branch.children, function(i){
var item = branch.children[i]; //assign each child in variable item
$item = $('<li>', { //jquery object
id: "item" + item.id
});
$item.append($('<input>', { //add check boxes
type: "checkbox",
id: "item" + item.id,
name: "item" + item.id
}));
$item.append($('<label>', { //add labels to HTML. For every id, display its title.
for: "item" + item.id,
text: item.title
}));
parentUL.append($item);
if (item.children) {
var $ul = $('<ul>', {
}).appendTo($item);
addItem($ul, item); //recursive call to add another item if there are more children.
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="root">
</div>
现在只需使用您的getJSON而不是我的模型数据,我希望您会没事:)
相关文章:
- 加载文件,然后调用回调函数
- 根据浏览器大小加载文件
- 错误:无法在“XMLHttpRequest”上执行“发送”:无法加载“文件”:AngularJS SPA
- Ajax在mootools中使用来加载文件
- 加载文件时xmlhttp不稳定,如何修复
- Require.js何时加载文件
- 有没有办法在不打包的情况下在 nodejs 上加载文件
- 如何通过从浏览器 js 控制台触发的 require.js 重新加载文件
- 使用jQuery加载文件,计算类的元素并设置间隔比率
- 如何在 AngularJS UI 路由器中从bower_component加载文件
- JavaScript 本地应用程序保存/加载文件
- 如何在特定页面上加载文件
- 内容安全策略不从本地主机加载文件
- Javascript 无法从其他目录加载文件
- Extjs MVC 文件夹结构无法加载文件
- 节点.js - 在运行时加载文件
- nodejs加载文件
- Javascript/AAJAX仅重新加载文件“;onchange”;
- 加载文件,并在特定行之后删除javascript/jquery中的所有剩余行
- 是否可以在非服务页面上使用JS/HTML5 FileReader加载文件