前言
Vue+ElementUI 是目前项目开发中普遍使用的前端技术，我们在开发中肯定会遇到用树形展示数据的需求，比如公司和部门，公司下面有多个部门，部门下面又有多个班组，每个部门或者班组下有相关人员，此时我们就可以使用ElementUI 的 tree 组件来实现，前端根据官网上的例子，需要的数据是这样的：
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
<script>
export default {
data() {
return {
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleNodeClick(data) {
console.log(data);
}
}
};
</script>
效果是这样的：
接下来就是后台去构建这样结构的数据，然后提供接口给前端了。
本篇文章的例子最终实现的效果是这样的：
后台返回的数据是这样的：
{
"msg":"操作成功",
"code":200,
"data":[
{
"id":1,
"label":"停电性质",
"children":[
{
"id":2,
"label":"故障停电",
"children":[
{
"id":6,
"label":"短路"
}
]
},
{
"id":3,
"label":"预安排停电"
},
{
"id":4,
"label":"临时停电"
},
{
"id":5,
"label":"限电",
"children":[
{
"id":24,
"label":"测试"
}
]
}
]
}
]
}
一、数据库表结构设计
create table SYS_NATURE_TREE
(
nature_tree_id NUMBER not null,
nature_tree_name VARCHAR2(50),
parent_id NUMBER,
parent_ids VARCHAR2(50),
show_order NUMBER,
enable_flag NUMBER
)
其中 nature_tree_id 是主键、nature_tree_name 就是我们要展示的树节点的名称了，parent_id 是当前节点的父级，parent_ids 是当前节点的所有父级，用‘，’隔开。
二、具体实现
1. entity
SYS_NATURE_TREE 对应的实体类：
public class NatureTree {
private Integer natureTreeId;
private String natureTreeCode;
private String natureTreeName;
private Integer parentId;
private String parentIds;
private Integer showOrder;
private Integer enableFlag;
/** 子节点 List 集合 */
private List<NatureTree> children;
/** 构造器、get set 方法等省略了 **/
...
实体类里加了子节点的 List 集合字段
2. controller
代码如下：
@GetMapping("/blackoutNatureTreeSelect")
public BaseApiService blackoutNatureTreeSelect(NatureTree natureTree)
{
// 先查出来 SYS_NATURE_TREE 表中的所有数据
List<NatureTree> natureTrees = blackoutNatureService.selectNatureTreeList(natureTree);
// 返回构建好的数据
return BaseApiService .success(blackoutNatureService.buildNatureTreeSelect(natureTrees));
}
思路是先将 sys_nature_tree 表中的数据全部查出来，然后作为参数传入构建数据结构的方法 buildNatureTreeSelect。重点是这个 service 方法 buildNatureTreeSelect
3. service
代码如下：
@Override
public List<TreeSelect> buildNatureTreeSelect(List<NatureTree> natureTrees)
{
List<NatureTree> listNatureTrees = buildNatureTree(natureTrees);
return listNatureTrees.stream().map(TreeSelect::new).collect(Collectors.toList());
}
@Override
public List<NatureTree> buildNatureTree(List<NatureTree> natureTrees) {
// 初步处理好的数据
List<NatureTree> returnList = new ArrayList<NatureTree>();
// 所有树 treeId 的 List 集合
List<Integer> tempList = new ArrayList<Integer>();
for (NatureTree natureTree : natureTrees)
{
tempList.add(natureTree.getNatureTreeId());
}
// 遍历所有树节点（一个树节点就是数据库中的一条数据）
for (Iterator<NatureTree> iterator = natureTrees.iterator(); iterator.hasNext();)
{
NatureTree natureTree = (NatureTree) iterator.next();
// 如果是顶级节点, 遍历该父节点的所有子节点
if (!tempList.contains(natureTree.getParentId()))
{
// 递归处理数据，此处传入的 natureTree 是最顶级节点，没有父节点
recursionFn(natureTrees, natureTree);
returnList.add(natureTree);
}
}
if (returnList.isEmpty())
{
returnList = natureTrees;
}
return returnList;
}
/**
* 递归列表
*/
private void recursionFn(List<NatureTree> list, NatureTree t)
{
// 获取此节点的子节点列表
List<NatureTree> childList = getChildList(list, t);
// 将子节点 List set 进去
t.setChildren(childList);
for (NatureTree tChild : childList)
{
if (hasChild(list, tChild))
{
// 判断是否有子节点
Iterator<NatureTree> it = childList.iterator();
while (it.hasNext())
{
NatureTree n = (NatureTree) it.next();
// 递归
recursionFn(list, n);
}
}
}
}
/**
* 获取子节点列表
*/
private List<NatureTree> getChildList(List<NatureTree> list, NatureTree t)
{
List<NatureTree> tlist = new ArrayList<NatureTree>();
Iterator<NatureTree> it = list.iterator();
while (it.hasNext())
{
NatureTree n = (NatureTree) it.next();
if (StringUtils.isNotNull(n.getParentId()) && n.getParentId().intValue() == t.getNatureTreeId().intValue())
{
tlist.add(n);
}
}
return tlist;
}
/**
* 判断是否有子节点
*/
private boolean hasChild(List<NatureTree> list, NatureTree t)
{
return getChildList(list, t).size() > 0 ? true : false;
}
// 经过 buildNatureTree 处理过的 listNatureTrees 中的 NatureTree，children 属性就都有数据了
List<NatureTree> listNatureTrees = buildNatureTree(natureTrees);
// 然后就是将 listNatureTrees 处理成最终格式的数据
listNatureTrees.stream().map(TreeSelect::new).collect(Collectors.toList());
TreeSelect 类
/**
* Treeselect树结构实体类
*
* @author wangpsh
*/
public class TreeSelect implements Serializable
{
private static final long serialVersionUID = 1L;
/** 节点ID */
private Long id;
/** 节点名称 */
private String label;
/** 子节点 */
@JsonInclude(JsonInclude.Include.NON_EMPTY)
private List<TreeSelect> children;
public TreeSelect()
{
}
public TreeSelect(NatureTree natureTree)
{
this.id = (long) natureTree.getNatureTreeId();
this.label = natureTree.getNatureTreeName();
this.children = natureTree.getChildren().stream().map(TreeSelect::new).collect(Collectors.toList());
}
public Long getId()
{
return id;
}
public void setId(Long id)
{
this.id = id;
}
public String getLabel()
{
return label;
}
public void setLabel(String label)
{
this.label = label;
}
public List<TreeSelect> getChildren()
{
return children;
}
public void setChildren(List<TreeSelect> children)
{
this.children = children;
}
}
上面贴出了最主要的代码，用到了 java 8 的 stream 流。至此，我们的数据结构就构建完成了
4. 数据初始化
数据库中初始化一些数据，其中的停电性质就是顶级节点
三、总结
以上树结构的数据是提前在数据库中初始化好的，下一篇会探讨树节点增删改的问题，这个相对来说就比较简单了。
转载：https://blog.csdn.net/zhang33565417/article/details/116333145
查看评论