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)
},
handleCheckChan