Javascript 从嵌套的 UL LI 复选框生成递归 JSON 对象
Javascript generate recursive JSON object from nested UL LI check box
我有在选中/取消选中时从嵌套的 UL LI 复选框生成 JSON 对象的情况,如下所示的结构。
<ul class="tree" id="tree">
<li><input type="checkbox" name="Team1" value="Team1" checked="checked">Team1 <!-- AND SHOULD CHECK HERE -->
<ul>
<li><input type="checkbox" name="one" value="Team1 child1" checked="checked">Team1 child1</li>
<li><input type="checkbox" name="two" value="Team1 child2">Team1 child2</li>
<li><input type="checkbox" name="three" value="Team1 child3" checked="checked">Team1 child3 <!-- SHOULD CHECK HERE -->
<ul>
<li><input type="checkbox" name="four" value="Team1 child3 - child1" checked="checked">Team1 child3 - child1</li>
<li><input type="checkbox" name="five" value="Team1 child3 - child2">Team1 child3 - child2</li> <!-- CHECK HERE -->
</ul>
</li>
</ul>
</li>
<li><input type="checkbox" name="six" value="Team2">Team2</li>
<li><input type="checkbox" name="seven" value="Team3" checked="checked">Team3
<ul>
<li><input type="checkbox" name="eight" value="Team3 child1">Team3 child1</li>
<li><input type="checkbox" name="nine" value="Team3 child2" checked="checked">Team3 child2
<ul>
<li><input type="checkbox" name="ten" value="Team3 child2 - child1" checked="checked">Team3 child2 - child1</li>
<li><input type="checkbox" name="eleven" value="Team3 child2 - child2" checked="checked">Team3 child2 - child2</li>
</ul>
</li>
</ul>
</li>
</ul>
JSON结构应该像下面这样,
{
"Team" : [
{
"name" : "Team1",
"child" : [
{
"name" : "Team1 child1",
},
{
"name" : "Team1 child3",
"child" :[
{
"name" : "Team1 child3- child1",
}
]
}
]
},
{
"name" : "Team3",
"child" : [
{
"name" : "Team3 child2",
"child" :[
{
"name" : "Team3 child2- child1",
},
{
"name" : "Team3 child2- child2",
}
]
}
]
}
]
}
尝试使用完全混乱的解决方案。请提供更好的解决方案。
你可以用递归来做到这一点
function createJSON($ul) {
return $ul
.children() // get all children (li)
.filter(function() { // filter li which have checked checkbox
return $(this).children(':checkbox')[0].checked; // get children checkbox is checked
})
.map(function() { // now generate array using map()
var obj1 = {};
obj1.name = $.trim($(this).contents().filter(function() { // get text content and trim to avoid spaces
return this.nodeType === 3 && $.trim(this.textContent).length > 0 // check text node and empty string
}).text());
var $ulc = $(this).children('ul'); // get inner children
if ($ulc.length > 0) // if it have children , use recursion and do the same
obj1.child = createJSON($ulc); // recursion
return obj1;
}).get(); // get the result array
}
$(':checkbox').change(function() {
$('#res').html(JSON.stringify(createJSON($('#tree')), null, 3))
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<pre id="res"></pre>
<ul class="tree" id="tree">
<li>
<input type="checkbox" name="account_settings" value="yes" checked="checked">Team1
<!-- AND SHOULD CHECK HERE -->
<ul>
<li>
<input type="checkbox" name="one" value="one" checked="checked">Team1 child1</li>
<li>
<input type="checkbox" name="two" value="two">Team1 child2</li>
<li>
<input type="checkbox" name="user_roles" value="user_roles">Team1 child3
<!-- SHOULD CHECK HERE -->
<ul>
<li>
<input type="checkbox" name="user_role" value="add" checked="checked">Team1 child3 - child1</li>
<li>
<input type="checkbox" name="user_role" value="delete">Team1 child3 - child2</li>
<!-- CHECK HERE -->
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" name="rl_module" value="yes">Team2</li>
<li>
<input type="checkbox" name="rl_module" value="yes" checked="checked">Team3
<ul>
<li>
<input type="checkbox" name="vat" value="yes">Team3 child1</li>
<li>
<input type="checkbox" name="bank_account" value="yes">Team3 child2
<ul>
<li>
<input type="checkbox" name="view" value="yes" checked="checked">Team3 child2 - child1</li>
<li>
<input type="checkbox" name="crud" value="yes" checked="checked">Team3 child2 - child2</li>
</ul>
</li>
</ul>
</li>
</ul>
相关文章:
- 遍历递归json树并合并
- 递归 - 将 Javascript Map 转换为嵌套的 JSON 对象
- Javascript 从嵌套的 UL LI 复选框生成递归 JSON 对象
- 用于创建 JSON 对象的 Javascript 递归
- 通过Javascript中的递归迭代映射嵌套JSON
- 在递归循环javascript之后,为JSON键变量使用自定义HTML元素
- 递归扩展json对象
- 如何使用 AngularJS 递归地将 JSON 树呈现为 HTML
- Javascript - 递归 - 迭代 json,用户能够跳过
- 递归迭代没有已知长度和深度的 JSON 数据
- 使用 JSON 的递归
- JSON 对象 - 递归更改所有子项的属性名称
- Javascript在JSON对象中递归查找
- 递归搜索 JSON 并删除某些子对象
- 如何使用递归过滤所有单个JSON数据
- 通过递归将嵌套json对象路径保存到变量
- 递归地查找JSON值
- jstree,json,ajax:递归搜索和选择
- 在Javascript/jQuery中递归地从嵌套JSON中获取所有子项
- 在递归JSON中需要方括号