极客笔记JS遍历出tree中选中的数据
在Web开发中，常常会遇到需要展示树形结构数据的情况。用户可能需要勾选树形结构中的某些节点，然后获取这些选中节点的数据。本文将介绍如何使用JavaScript遍历出树形结构中选中的数据。
1. 准备工作
首先，我们需要准备一个包含树形结构数据的示例。假设我们有如下的树形结构数据：
const treeData = [
{
label: '节点1',
children: [
{
label: '子节点1'
},
{
label: '子节点2'
}
]
},
{
label: '节点2',
children: [
{
label: '子节点3'
},
{
label: '子节点4'
}
]
}
];
以上代码定义了一个包含两个根节点的树形结构数据，每个节点下面有若干子节点。
2. 创建树形结构
接下来，我们需要将上面定义的树形结构数据渲染成树形结构。在这里，我们使用HTML和CSS来创建一个简单的树形结构：
<!DOCTYPE html>
<html>
<head>
<title>树形结构示例</title>
<style>
.tree-node {
margin-left: 20px;
}
</style>
</head>
<body>
<ul>
<li>
节点1
<ul class="tree-node">
<li>子节点1</li>
<li>子节点2</li>
</ul>
</li>
<li>
节点2
<ul class="tree-node">
<li>子节点3</li>
<li>子节点4</li>
</ul>
</li>
</ul>
</body>
</html>
在上面的HTML代码中，我们使用<ul>和<li>标签来创建树形结构。根据treeData中的数据来生成树形结构的层次和子节点。
3. 选中节点
接下来，我们给每个节点添加一个复选框，来实现节点的选中功能。当用户点击复选框时，可以切换节点的选中状态。
<!DOCTYPE html>
<html>
<head>
<title>树形结构示例</title>
<style>
.tree-node {
margin-left: 20px;
}
</style>
</head>
<body>
<ul>
<li>
<input type="checkbox">节点1
<ul class="tree-node">
<li><input type="checkbox">子节点1</li>
<li><input type="checkbox">子节点2</li>
</ul>
</li>
<li>
<input type="checkbox">节点2
<ul class="tree-node">
<li><input type="checkbox">子节点3</li>
<li><input type="checkbox">子节点4</li>
</ul>
</li>
</ul>
</body>
</html>
在以上代码中，我们为每个节点添加了一个复选框，用户可以通过点击复选框来选择节点。接下来，我们需要编写JavaScript代码来获取选中的节点数据。
4. 遍历选中节点数据
现在，我们需要编写JavaScript代码来获取用户选中的节点数据。我们可以通过递归遍历树形结构，找出所有选中的节点，然后将这些节点的数据保存到一个数组中。
// 递归遍历树形结构，获取选中的节点数据
function getCheckedNodes(node, checkedNodes) {
if (node.checked) {
checkedNodes.push(node.label);
}
if (node.children) {
for (let childNode of node.children) {
getCheckedNodes(childNode, checkedNodes);
}
}
}
// 获取树形结构中选中的节点数据
function getSelectedNodes() {
const checkedNodes = [];
const treeNodes = document.querySelectorAll('input[type="checkbox"]');
for (let node of treeNodes) {
if (node.checked) {
let label = node.parentElement.textContent.replace(/\n|\r/g, '').trim();
checkedNodes.push(label);
}
}
const result = [];
for (let node of checkedNodes) {
getCheckedNodes(node, result);
}
return result;
}
document.querySelector('input[type="button"]').addEventListener('click',
() => {
const selectedNodes = getSelectedNodes();
console.log(selectedNodes);
});
在上面的代码中，我们定义了getCheckedNodes()函数用来递归遍历树形结构并获取选中的节点数据。然后在getSelectedNodes()函数中，我们首先获取所有复选框节点，然后遍历这些节点，找出选中的节点，再调用getCheckedNodes()函数获取选中节点的数据。最后，我们在点击按钮时调用getSelectedNodes()函数，并将结果输出到控制台。
5. 运行结果
现在我们已经完成了代码的编写，接下来将代码放入HTML中并查看运行结果。
<!DOCTYPE html>
<html>
<head>
<title>树形结构示例</title>
<style>
.tree-node {
margin-left: 20px;
}
</style>
</head>
<body>
<ul>
<li>
<input type="checkbox">节点1
<ul class="tree-node">
<li><input type="checkbox">子节点1</li>
<li><input type="checkbox">子节点2</li>
</ul>
</li>
<li>
<input type="checkbox">节点2
<ul class="tree-node">
<li><input type="checkbox">子节点3</li>
<li><input type="checkbox">子节点4</li>
</ul>
</li>
</ul>
<input type="button" value="获取选中节点数据">
<script>
// JavaScript代码
</script>
</body>
</html>
在浏览器中打开以上HTML文件，并勾选某些节点，然后点击“获取选中节点数据”按钮，可以在控制台中看到选中节点的数据。
通过以上代码，我们成功实现了遍历树形结构中选中的数据的功能。这种方法可以用于处理树形结构数据的选中操作，并获取用户选中的数据。