我正在尝试创建一个接受 JSON 格式数据的插件。我希望输出如下所示:https://jsfiddle.net/ann7tctp/330/
我正在尝试设置一个递归函数，但无法理解它。嵌套列表深度未知。请参阅更新的 fiddle 以了解有关我想要实现的目标的更多信息。
非常感谢任何帮助!
<html>
<style>
.list-group.list-group-root {
padding: 0;
overflow: hidden;
}
.list-group.list-group-root .list-group {
margin-bottom: 0;
}
.list-group.list-group-root .list-group-item {
border-radius: 0;
border-width: 1px 0 0 0;
}
.list-group.list-group-root > .list-group-item:first-child {
border-top-width: 0;
}
.list-group.list-group-root > .list-group > .list-group-item {
padding-left: 30px;
}
.list-group.list-group-root > .list-group > .list-group > .list-group-item {
padding-left: 45px;
}
.list-group-item .glyphicon {
margin-right: 5px;
}
</style>
<h1>Expected Output</h1>
<ul class="list-group list-group-root well">
<li href="#item-1" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1
</li>
<ul class="list-group collapse" id="item-1">
<li href="#item-1-1" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1.1
</li>
<ul class="list-group collapse" id="item-1-1">
<li href="#" class="list-group-item">Item 1.1.1</li>
<li href="#" class="list-group-item">Item 1.1.2</li>
<li href="#" class="list-group-item">Item 1.1.3</li>
</ul>
<li href="#item-1-2" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1.2
</li>
<ul class="list-group collapse" id="item-1-2">
<li href="#" class="list-group-item">Item 1.2.1</li>
<li href="#" class="list-group-item">Item 1.2.2</li>
<li href="#" class="list-group-item">Item 1.2.3</li>
</ul>
<li href="#item-1-3" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1.3
</li>
<ul class="list-group collapse" id="item-1-3">
<li href="#" class="list-group-item">Item 1.3.1</li>
<li href="#" class="list-group-item">Item 1.3.2</li>
<li href="#" class="list-group-item">Item 1.3.3</li>
</ul>
</ul>
</ul>
<h1>JSON Data Output</h1>
<div id="nested-categories"></div>
<script>
$(function() {
var data = [
{
"id": 1,
"name": "Uncategorized",
"children": []
},
{
"id": 3,
"name": "Parent 1",
"children": [
{
"id": 4,
"name": "Child 1"
},
{
"id": 5,
"name": "Child 2"
},
{
"id": 6,
"name": "Child 3"
}
]
},
{
"id": 7,
"name": "Parent 2",
"children": [
{
"id": 8,
"name": "Child 1"
},
{
"id": 9,
"name": "Child 2"
},
{
"id": 10,
"name": "Child 3"
}
]
}
];
var isInitTree = true;
function buildTreeWithJSONArray(json,root) {
if(isInitTree){
isInitTree = false;
//Create Initial element
root.append('<ul class="list-group list-group-root in well"></ul>');
}else{
root.find("ul:first").append('<ul class="list-group"></ul>');
}
for (var i = 0; i < json.length; i++) {
var $li = $("<li class='list-group-item' data-id='" + json[i].id + "'><span class='list-group-content'>" + json[i].name + "</span></li>");
root.find("ul:first").append($li);
if (typeof json[i].children !== 'undefined') {
//$li.data("toggle","collapse").prepend('<i class="fa fa-arrow-right"></i> ').attr('href','#list-'+json[i].id);
//root.find('ul.list-group:first').attr("id",'list-'+json[i].id).addClass('collapse');
buildTreeWithJSONArray(json[i].children, $li);
}
}
}
//Run the Recursive function..
buildTreeWithJSONArray(data,$("#nested-categories"));
$('.list-group-item').on('click', function() {
$('.glyphicon', this)
.toggleClass('glyphicon-chevron-right')
.toggleClass('glyphicon-chevron-down');
});
});
</script>
</html>
最佳答案
您的代码发生的情况是，当您调用递归函数时，您正在验证根是否是 init Tree，当然它不会像变量 isInitTree 那样已更新为 false，因此您的代码表示，它应该在根元素内找到 ul ，在您的情况下，是 li 元素您将作为参数发送。
它不会找到任何 ul 元素，因为您发送的 li 中没有任何元素，因此它不会执行任何操作。
尝试:
if(isInitTree){
isInitTree = false;
//Create Initial element
root.append('<ul class="list-group list-group-root in well"></ul>');
}else{
root.append('<ul class="list-group"></ul>');
}
请查看您的updated fiddle ，这有望让您朝着正确的方向前进。
关于javascript - 将 JSON 数据渲染到 Bootstrap 嵌套 HTML - JQuery 插件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43665410/