树形数据,如果父级全选返回父级的名称和id,如果子级勾选返回名称为:父级-子级,JS实现
时间: 2024-04-30 12:21:42 浏览: 66
关于树形菜单 Checkbox的全选
可以使用递归的方式来处理树形数据,以下是一个实现的示例代码:
```javascript
function getSelectedNodes(nodes, parentName = '', parentId = '') {
let result = [];
nodes.forEach(node => {
if (node.checked) {
if (node.children && node.children.length > 0) {
// 子节点勾选,递归调用
let subNodes = getSelectedNodes(node.children, node.name, node.id);
result.push(...subNodes);
} else {
// 叶子节点勾选,返回父级名称和id
let name = parentName ? `${parentName}-${node.name}` : node.name;
let id = parentId ? `${parentId}-${node.id}` : node.id;
result.push({ name, id });
}
} else if (node.children && node.children.length > 0) {
// 父级节点未勾选,但有子节点勾选,递归调用
let subNodes = getSelectedNodes(node.children, node.name, node.id);
result.push(...subNodes);
}
});
return result;
}
```
其中 nodes 是树形数据的数组,每个节点包含 id、name、checked 和 children 属性。如果节点为叶子节点,children 属性为 undefined 或空数组。
调用示例:
```javascript
let nodes = [
{
id: '1',
name: 'Parent A',
checked: false,
children: [
{ id: '11', name: 'Child A-1', checked: true },
{ id: '12', name: 'Child A-2', checked: true },
{ id: '13', name: 'Child A-3', checked: false }
]
},
{
id: '2',
name: 'Parent B',
checked: true,
children: [
{ id: '21', name: 'Child B-1', checked: true },
{ id: '22', name: 'Child B-2', checked: true }
]
}
];
let selectedNodes = getSelectedNodes(nodes);
console.log(selectedNodes);
// Output: [{ name: 'Parent A-Child A-1', id: '1-11' }, { name: 'Parent A-Child A-2', id: '1-12' }, { name: 'Parent B-Child B-1', id: '2-21' }, { name: 'Parent B-Child B-2', id: '2-22' }]
```
阅读全文