使用JavaScript或JQuery从json数据创建动态文件夹层次结构 [英] creating dynamic folder Hierarchy from json data using JavaScript or JQuery
问题描述
MY jSon数据Strucutre：
MY jSon data Strucutre :
var data = {
"FolderList": [
{
"FolderID": 1,
"FolderName": "parent1",
"ParentFolderID": -1
},
{
"FolderID": 2,
"FolderName": "parent1 Child1",
"ParentFolderID": 1
},
{
"FolderID": 3,
"FolderName": "parent2",
"ParentFolderID": -1
},
{
"FolderID": 4,
"FolderName": "parent1 Child1 Child1",
"ParentFolderID": 2
},
{
"FolderID": 5,
"FolderName": "parent1 Child1 Child2",
"ParentFolderID": 2
},
{
"FolderID": 6,
"FolderName": "parent2 Child1",
"ParentFolderID": 3
}
]
};
现在，我想创建像这样的文件夹层次结构html：
Now, I wanted to do create folder hierarchy html like this:
parent1
parent1 child1
parent1 child1 child1
parent1 child1 child2
parent2
parent2 child1
实际上我想生成这样的HTML代码
Actually I wanted to generate HTML code like this
<ul>
<li>Parent1
<ul>
<li>parent1 child1
<ul>
<li>parent1 child1 child1</li>
<li>parent1 child1 child2</li>
</ul>
</li>
</ul>
</li>
<li>parent2
<ul>
<li>parent2 child1</li>
</ul>
</li>
</ul>
如何使用JavaScript或jQuery执行此操作？提前致谢。我试图使用递归函数，但被卡在中间。但是我的代码是这样的：
How can I do this using JavaScript or jQuery? Thanks in advance. I tried to use recursive function but got stucked in the middle. However my code is like this:
function populatedata() {
$.each(data.FolderList, function (i, folder) {
if (folder.ParentFolderID == -1) {
html += '<li>' + folder.FolderName;
checkChild(folder.FolderID);
html += '</li>';
}
});
}
function checkChild(parentid) {
$.each(data.FolderList, function (i, folder) {
if (folder.ParentFolderID == parentid) {
html += '<li><ul>' + folder.FolderName;
checkChild(folder.FolderID);
html+=</ul></li>
return html;
}
else {
return ;
}
});
}
最后在FAngel的帮助下使用以下代码，我创建了实际需要的结构我的项目
Finally with below code by help of FAngel, I created required strucucture actually needed in my project
我修改过的代码是这样的：
My modified code is like this:
function populatedata() {
var list = $("<ul>").attr({ class: "collapsibleList", id: "folder" });
$.each(data.FolderList, function (i, folder) {
if (folder.ParentFolderID == -1) {
var item = $("<li>").
css("border-top","0").html('<span>'+folder.FolderName
+'</span><a href="Docs.html">
<div class="view-docs pull-right">View</div></a>');
list.append(item);
var children = $('<ul>');
item.append(children);
checkChild(folder.FolderID, children);
}
});
$('#folderList').append(list);
}
function checkChild(parentid, parent) {
$.each(data.FolderList, function (i, folder) {
if (folder.ParentFolderID == parentid) {
var item = $("<li>").
html('<span>'+folder.FolderName
+'</span><a href="Docs.html">
<div class="view-docs pull-right">View</div></a>');
var children = $('<ul>');
parent.append(item);
item.append(children);
checkChild(folder.FolderID, children);
}
else {
return;
}
});
}
推荐答案
以下是演示： http://jsfiddle.net/zn2C7/7/
var list = $("<ul>");
function populatedata() {
$.each(data.FolderList, function (i, folder) {
if (folder.ParentFolderID == -1) {
var item = $("<li>").html(folder.FolderName);
list.append(item);
var children = $('<ul>');
item.append(children);
checkChild(folder.FolderID, children);
}
});
$('body').append(list);
}
function checkChild(parentid, parent) {
$.each(data.FolderList, function (i, folder) {
if (folder.ParentFolderID == parentid) {
var item = $("<li>").html(folder.FolderName);
var children = $('<ul>');
parent.append(item);
item.append(children);
checkChild(folder.FolderID, children);
}
else {
return ;
}
});
}
可以使用html变量构建它，就像你试图这样做，但使用jQuery的DOM操作函数要简单得多（ $（'< ul>'）和 $（'< li> '） - 创建新元素， .append（） - 将元素附加到其他元素）
It was possible to build it using html variable, like you tried to do that, but it is much simpler to use DOM manipulation functions of jQuery ($('<ul>') and $('<li>') - create new element, .append() - append element to some other element)
function checkChild(parentid) {
$.each(data.FolderList, function (i, folder) {
if (folder.ParentFolderID == parentid) {
html += '<li><ul>' + folder.FolderName;
checkChild(folder.FolderID);
html+=</ul></li>
return html;
}
else {
return ;
}
});
}
另外，请注意，在上面的代码中你正在做从。不确定你想要什么，但在 每个函数回调中返回html; .each 在常规循环中它可能像 break 一样工作（如果你将返回false）：
Also, please note that in code above you are doing return html; from each function callback. Not sure what you wanted to get exactly, but in .each it may work like break in regular loop (if you will return false):
我们可以通过返回
false来停止回调函数中的循环。
We can stop the loop from within the callback function by returning false.
来自jquery api page。
That is from jquery api page.
此外，对于此类任务，我更喜欢使用调试器。目前，在浏览器中有很多强大的HTML / CSS / JS调试工具。只需在Chrome，IE或FF中按 F12 （对于最后一个，您可能需要安装Firebug扩展），您将获得许多有用的功能以及简单的JS调试。
Also, for such tasks I prefer to use debugger. At this moment there are a lot of powerful tools for HTML/CSS/JS debugging in browser. Just press F12 in Chrome, IE or FF (for the last one you may need to install Firebug extension) and you will get a lot of helpful features along with simple JS debugging.
这篇关于使用JavaScript或JQuery从json数据创建动态文件夹层次结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
