如何让所有的孩子都进入树视图的孩子?

Question

我有一个这样的返回json数据

"data":[ 
{ 
"taskAssignGroupId":123,
"taskAssignGroupName":"Parent Pool",
"taskAssignGroupDesc":"Parent Pool Desc",
"state": true,
"childPools":[ 
{ 
"taskAssignGroupId":124,
"taskAssignGroupName":"Child Pool Name",
"taskAssignGroupDesc":"Child Pool Desc",
"state":true,
"childPools":[ 
{ 
"taskAssignGroupId":125,
"taskAssignGroupName":"Child Child Pool Name",
"taskAssignGroupDesc":"Child Child Pool Desc",
"state":true,
"childPools":[ 
]
}
]
}
]
}
]

因此，正如您在示例中所看到的，我有一个父池和父池的子池。

主要问题是子池可以是无限的。我的意思是子池可以是 1、5 或更多。所以在我的代码中，我只能得到 1 个孩子。

如何使用 $.each 函数或使用其他选项显示所有子项？

所以我使用 $.each 来获取数据，例如

var htmlStr = "";
var checked = '';
$.each(dataSet.data, function (itemId, item) {
htmlStr += '<li><i class="fa fa-plus"></i> <label> <input id="' + item.taskAssignGroupId+ '"  type="checkbox" />' + item.taskAssignGroupName+ '</label>'
htmlStr += '<ul>'
$.each(item.childPools, function (index, child) {
if (child.state) {
checked = 'checked=checked';
}
else {
checked = '';
}
htmlStr += '<li><label><input ' + checked + ' class="hummingbird-end-node" id="' + child.taskAssignGroupId+ '" type="checkbox" />' + child.taskAssignGroupName+ "-" + child.taskAssignGroupDesc+ '</label></li>'
});
htmlStr += '</ul>'
htmlStr += '</li>'
});
$('#treeview').html(htmlStr)
$("#treeview").hummingbird();

谢谢！

Answer 1

看看演示，

我创建了一个函数，每当我们有一个包含数据的 childPool 时，我们都会调用该函数。

function pool(pools) {
$.each(pools, function(index, child) {
if (child.state) {
checked = 'checked=checked';
} else {
checked = '';
}
htmlStr += '<li><label><input ' + checked + ' class="hummingbird-end-node" id="' + child.taskAssignGroupId + '" type="checkbox" />' + child.taskAssignGroupName + "-" + child.taskAssignGroupDesc + '</label></li>'
if (child.childPools.length > 0) {
htmlStr += '<ul>'
pool(child.childPools)
htmlStr += '</ul>'
}
});
}

工作演示

var dataSet = {
"data": [{
"taskAssignGroupId": 123,
"taskAssignGroupName": "Parent Pool",
"taskAssignGroupDesc": "Parent Pool Desc",
"state": true,
"childPools": [{
"taskAssignGroupId": 124,
"taskAssignGroupName": "Child Pool Name",
"taskAssignGroupDesc": "Child Pool Desc",
"state": true,
"childPools": [{
"taskAssignGroupId": 125,
"taskAssignGroupName": "Child Child Pool Name",
"taskAssignGroupDesc": "Child Child Pool Desc",
"state": true,
"childPools": [
]
}]
}]
}]
}
var htmlStr = "";
var checked = '';
$.each(dataSet.data, function(itemId, item) {
htmlStr += '<li><i class="fa fa-plus"></i> <label> <input id="' + item.taskAssignGroupId + '"  type="checkbox" />' + item.taskAssignGroupName + '</label>'
htmlStr += '<ul>'
if (item.childPools.length > 0) {
pool(item.childPools)
}
htmlStr += '</ul>'
htmlStr += '</li>'
});
function pool(pools) {
$.each(pools, function(index, child) {
if (child.state) {
checked = 'checked=checked';
} else {
checked = '';
}
htmlStr += '<li><label><input ' + checked + ' class="hummingbird-end-node" id="' + child.taskAssignGroupId + '" type="checkbox" />' + child.taskAssignGroupName + "-" + child.taskAssignGroupDesc + '</label></li>'
if (child.childPools.length > 0) {
htmlStr += '<ul>'
pool(child.childPools)
htmlStr += '</ul>'
}
});
}
$('#treeview').html(htmlStr)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="treeview">
</ul>