循环以显示分层数据
Loop to display hierarchical data
我正在用基本上分层的数据创建一个数组,例如:
[
{id: 1, title: 'hello', parent: 0, children: [
{id: 3, title: 'hello', parent: 1, children: [
{id: 4, title: 'hello', parent: 3, children: [
{id: 5, title: 'hello', parent: 4},
{id: 6, title: 'hello', parent: 4}
]},
{id: 7, title: 'hello', parent: 3}
]}
]},
{id: 2, title: 'hello', parent: 0, children: [
{id: 8, title: 'hello', parent: 2}
]}
]
我想在数组中循环,但无法理解如何递归地向下循环以创建一个无序列表,其中每个子级别都是缩进的。尝试在JavaScript中执行此操作,但需要朝着正确的方向推动循环的构建,向下钻取,直到没有更多的子级,然后返回到顶部数组。
如有任何帮助,我们将不胜感激。
我在之前回答了一个问题
下面是它的演示: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 ($('<ul>') and $('<li>') - create new element, .append() - append element to some other element)
的DOM操作函数要简单得多
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;从每个函数回调。不确定你到底想要得到什么,但在.中,每一个都可能像打破常规循环一样工作(如果你会返回false):
我们可以通过返回false来停止回调函数中的循环。
这来自jqueryapi页面。
此外,对于这样的任务,我更喜欢使用调试器。目前有很多强大的工具可以在浏览器中调试HTML/CSS/JS。只需在Chrome、IE或FF中按F12(最后一个可能需要安装Firebug扩展),您将获得许多有用的功能以及简单的JS调试。
相关文章:
- 用程序搜索JQuery数据表中的文本
- 要求输入在数据列表中
- Webix 数据布局中的分层数据集
- Kendo UI,将饼图绑定到分层远程数据
- AngularJS :如何创建DOM并绑定到基于任意分层数据的模型
- 在网页中显示分层 xml 数据
- 将 MySQL 查询结果转换为分层数据 - D3
- JavaScript 中的透明分层数据帧
- d3.js遍历分层数据
- 分层数据模型的角度嵌套过滤器
- 分层json数据的正确显示
- 循环以显示分层数据
- 基于数据的分层列表按钮
- D3.js如何使用嵌入非分层数据的分层布局
- 如何从分层数据生成剑道树视图?AngularJS
- D3.js分层边缘绑定:在变量中嵌入json数据
- 具有深度分层数据的 ReactJS 数据流
- 未选择分层数据的选项
- 使用jQuery数据表显示分层数据
- AngularJS:需要一个分层数据的最佳实践