1、java后端
package com.jbossjf.bootproject.model;
import lombok.Data;
import java.util.ArrayList;
import java.util.List;
@Data
public class MonitorTree {
private String id;
private String title;
private String upid;
private List<MonitorTree> children = new ArrayList<>();
}
@ResponseBody
@RequestMapping(value = "/API/GetCourseTypeTree", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
public List<MonitorTree> GetCourseTypeTree() {
try {
List<CourseType> courseTypeList = courseTypeService.GetList();
List<MonitorTree> list = new ArrayList<>(courseTypeList.size());
MonitorTree monitorTree = null;
for(int i =0;i<courseTypeList.size();i++)
{
monitorTree = new MonitorTree();
monitorTree.setId(courseTypeList.get(i).getId());
monitorTree.setUpid(courseTypeList.get(i).getUpid());
monitorTree.setTitle(courseTypeList.get(i).getName());
list.add(monitorTree);
}
List<MonitorTree> result = list.stream()
.filter(item -> 0 == Integer.parseInt(item.getUpid()))
.map(item -> {
item.setChildren(getChildren(item, list));
return item;
})
.collect(Collectors.toList());
return result;
}catch (Exception e) {
logger.info(e.getStackTrace().toString());
}
return null;
}
/**
* 获取children
* @param root
* @param all
* @return
*/
public List<MonitorTree> getChildren(MonitorTree root, List<MonitorTree> all) {
List<MonitorTree> children = all.stream()
.filter(item -> item.getUpid().equals(root.getId()))
.map((item) -> {
item.setChildren(getChildren(item, all));
return item;
}).collect(Collectors.toList());
return children;
}
2、vue前端
<template>
<div style="flex-direction: rows;display: flex;">
<div class="dtree">
<el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
<el-tree
id="el-tree"
ref="treeForm"
:data="treeData"
show-checkbox
node-key="id"
:check-on-click-node="false"
:props="defaultProps"
class="filter-tree"
:filter-node-method="filterNode"
:default-checked-keys="defaultTree"
@check="changetree"
@check-change="handleNodeClick"
@node-contextmenu="rightClick"
/></div>
</div></template>
<script>
import {
GetCourseTypeTree
} from '@/api/course_type'
export default {
data() {
return {
defaultTree: [1],
filterText: '',
treeData: [], // 返回所有分类数据
defaultProps: {
children: 'children',
label: 'title'
}
}
},
created() {
this.InitTreeList()
this.changetree()
},
methods: {
handleNodeClick(data, checked, node) {
console.log('多选框设为单选框', checked, data)
console.log('data.id: ' + data.id)
console.log('data: ' + JSON.stringify(data))
// console.log(this.$refs.treeFrom.current-node-key)
if (checked) {
this.$refs.treeForm.setCheckedKeys([data.id])
}
console.log('getCheckedKeys' + this.$refs.treeForm.getCheckedKeys([data.id]))
},
changetree(data, lst) {
console.log('lst: ' + JSON.stringify(lst))
console.log(lst.checkedKeys.length)
if (lst.checkedKeys.length == 0) {
// 这里的treeForm是你el-tree命名的ref的值
this.$refs.treeForm.setCheckedKeys([data.id])
}
alert(data.id)
// this.InitTreeList()
},
rightClick(e) {
alert(e)
},
InitTreeList() {
GetCourseTypeTree()
.then(response => {
this.treeData = response
})
},
filterNode(value, data) {
if (!value) return true
return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1
}
}
}
</script>