1.首先查询出组织机构
就是一个简单的查询
List<Dept> deptList = mapper.getDeptList();
Map<Long, OrgNode> nodeMap = new HashMap<>();
List<Long> rootIds = new ArrayList<>();
for (Dept dept : deptList) {
Long deptId = dept.getDeptId();
String name = dept.getDeptName();
Long parentId = dept.getParentId();
OrgNode node = nodeMap.computeIfAbsent(deptId, OrgNode::new);
node.setId(deptId);
node.setLabel(name);
node.setParentId(parentId);
if (parentId == 0) {
rootIds.add(deptId);
} else {
OrgNode parent = nodeMap.computeIfAbsent(parentId, OrgNode::new);
parent.getChildren().add(node);
}
}
// 3. 输出组织机构
List<OrgNode> orgList = new ArrayList<>();
for (long rootId : rootIds) {
orgList.add(nodeMap.get(rootId));
}
List<Map<String, Object>> result = dfs2(orgList);
2.def2方法,只查询两级
业务需要
/**
* 只查询两级
* @param nodes
* @return
*/
private static List<Map<String, Object>> dfs2(List<OrgNode> nodes) {
List<Map<String, Object>> result = new ArrayList<>();
for (OrgNode node : nodes) {
Map<String, Object> map = new HashMap<>();
map.put("id", node.getId());
map.put("label", node.getLabel());
map.put("parentId", node.getParentId());
List<OrgNode> children = node.getChildren();
if (children != null && !children.isEmpty()){
List<OrgNode> collect = children.stream().peek(s -> s.setChildren(null)).collect(Collectors.toList());
map.put("children", collect);
}
result.add(map);
}
return result;
}
效果
查询所有级别
递归查询
/**
* 查询所有组织树
* @param nodes
* @return
*/
private static List<Map<String, Object>> dfs(List<OrgNode> nodes) {
List<Map<String, Object>> result = new ArrayList<>();
for (OrgNode node : nodes) {
Map<String, Object> map = new HashMap<>();
map.put("id", node.getId());
map.put("label", node.getLabel());
map.put("parentId", node.getParentId());
List<OrgNode> children = node.getChildren();
if (children != null && !children.isEmpty()) {
map.put("children", dfs(children));
}
result.add(map);
}
return result;
}
3.前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>树形控件</title>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<script src="js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-tree
:data="data"
show-checkbox
default-expand-all
node-key="id"
ref="tree"
highlight-current
:props="defaultProps"
@check-change="handleCheckChange"
:indent="20"
>
</el-tree>
<el-button @click="getCheckedNodes">通过 node 获取</el-button>
</div>
<script>
new Vue({
el:"#app",
methods:{
getCheckedNodes(){
console.log("打印选中结果："+this.selectedNodeData)
},
handleCheckChange(data, targetNode){
let checkedNodes = this.$refs.tree.getCheckedNodes() // 获取所有选中的节点数据
// console.log('当前选中的节点：', checkedNodes)
// 获取选中节点的 ID 列表
let checkedNodeIds = checkedNodes.map(node => {
return node.id
})
this.selectedNodeData=checkedNodeIds;
console.log('当前选中的节点 ID 列表：', this.selectedNodeData)
},
getNodeIds(node, ids) {
// 处理当前节点的 ID
ids.push(node.id)
// 处理所有子节点的 ID
for (let child of node.children) {
this.getNodeIds(child, ids)
}
},
getList(){
axios.get('http://localhost:8081/brand_case/dao.do?method=list_tree').then( res=>{
this.data=res.data.data
}
)
}
},
created(){
this.getList();
},
data(){
return{
selectedNodeData: [],
data: [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1',
children: [{
id: 7-1,
label: '二级 3-1-1'
}]
}, {
id: 8,
label: '二级 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
}
})
</script>
</body>
</html>