###1.首先查詢出組織機構 就是一個簡單的查詢 List<Dept> deptList = mapper.getDeptList(); Map<Long, OrgNode> nodeMap = new HashMap<>(); List<Long> rootIds = new ArrayList< ...
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>
