构建自定义分类树,本篇以构建区域分类树(area)为例:
一.area数据库表:
以下列举主要字段:主键id;区域唯一编码code; 区域名称name; 级别grade; 上级区域编码up_code(无上级填'0'); 短代码shorcode; 区域全名fullname.
二.前端样例
1.展示部分页面(分类树结构)
2.前端PrimeVue代码(TreeTable部分)
<div class="card" v-if="isreloaddata">
<TreeTable :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey" @nodeSelect="onNodeSelect"
v-model:expandedKeys="expandedKeys" :filters="filters" filterMode="lenient"
:paginator="true"
class="p-datatable-customers" :rows="10"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
:rowsPerPageOptions="[10,25,50]">
<Column field="code" header="区域编码" :expander="true">
<template #filter>
<InputText type="text" v-model="filters['code']" class="p-column-filter" placeholder="Filter by code"/>
</template>
</Column>
<Column field="name" header="区域名称">
<template #filter>
<InputText type="text" v-model="filters['name']" class="p-column-filter" placeholder="Filter by name"/>
</template>
</Column>
<Column field="fullname" header="区域全名">
<template #filter>
<InputText type="text" v-model="filters['fullname']" class="p-column-filter"
placeholder="Filter by fullname"/>
</template>
</Column>
<Column field="remark" header="备注">
<template #filter>
<InputText type="text" v-model="filters['remark']" class="p-column-filter"
placeholder="Filter by remark"/>
</template>
</Column>
</TreeTable>
</div>
三.实体类定义
1.实体类(部分字段)
@Data
@TableName("t_area")
public class Area{
@TableId(value = "id",type = IdType.AUTO)
private Long id;
private String code;
private String name;
private Integer grade;
private String upCode;
private String shorcode;
private String fullname;
private String remark;
}
2.VO类(部分字段)
@Data
public class AreaVO {
private Long id;
private String code;
private String name;
private String upCode;
private Integer grade;
private String fullname;
private String shorcode;
private String remark;
private String key;
// 详情对象
private AreaDetail data;
// 子对象
private List<AreaVO> children =new ArrayList<>();
public void add(AreaVO nodeVo){
children.add(nodeVo);
}
}
3.详情对象(前台需要展示的内容)
@Data
public class AreaDetail {
private String code;
private String name;
private String fullname;
private String remark;
}
四.后端代码
后端controller层,service层和dao层,使用Mybatis-puls.
1.后端层次
2.controller层(获取分类树列表部分,简化判断)
/**
* 获取区域档案列表的控制器方法
* @return 区域档案列表/0:查询失败
*/
@PostMapping("get_list")
public ResponseVo getAreaList(){
List<AreaVO> areaList = areaService.getAreaList();
return ResponseVo.ok(areaList);
}
2.service层
/**
* 获取区域档案列表的业务逻辑
* @return 区域档案列表
*/
public List<AreaVO> getAreaList() {
// 调用Mapper层原始数据查询
List<AreaVO> nodeVoList = areaMapper.selectList(null).stream()
// 过滤掉 code == upCode 的数据
.filter(area -> !area.getCode().equals(area.getUpCode()))
.map(areaInfo -> {
AreaVO nodeVo = new AreaVO();
// 同名属性赋值
BeanUtils.copyProperties(areaInfo, nodeVo);
nodeVo.setKey(areaInfo.getCode());
AreaDetail data = new AreaDetail();
BeanUtils.copyProperties(nodeVo, data);
nodeVo.setData(data);
return nodeVo;
}).collect(Collectors.toList());
return createTree(nodeVoList, "0");
}
3.构建分类树的方法
/**
* 构建区域档案树的方法
* @param nodeVoList 区域档案集合
* @param root 构建根节点
* @return 构建完成的区域档案集合
*/
private List<AreaVO> createTree(List<AreaVO> nodeVoList, String root) {
List<AreaVO> areaVOList = new ArrayList<>();
for (AreaVO areaVO : nodeVoList) {
if (areaVO.getUpCode().equals(root)) {
areaVO.setChildren(createTree(nodeVoList, areaVO.getCode()));
areaVOList.add(areaVO);
}
}
return areaVOList;
}
4.dao层
/**
* 区域 dao 层
*/
@Mapper
public interface AreaMapper extends BaseMapper<Area>{
}
5.请求及返回样例
测试发起请求:
请求地址:http://127.0.0.1:8080/easycharge/area/get_list
返回格式:
{
"flag": true,
"code": 200,
"data": [
{
"key": "1",
"data": {
"code": "1",
"name": "山东",
"fullname": "山东",
"remark": ""
},
"id": 1,
"children": [
{
"key": "1.1",
"data": {
"code": "1.1",
"name": "济南",
"fullname": "山东-济南",
"remark": ""
},
"id": 2,
"children": [
{
"key": "1.1.1",
"data": {
"code": "1.1.1",
"name": "槐荫",
"fullname": "山东-济南-槐荫",
"remark": ""
},
"id": 3,
"children": [
{
"key": "1.1.1.1",
"data": {
"code": "1.1.1.1",
"name": "龙湖",
"fullname": "山东-济南-槐荫-龙湖",
"remark": ""
},
"id": 4,
"children": []
}
]
}
]
},
{
"key": "1.2",
"data": {
"code": "1.2",
"name": "聊城",
"fullname": "山东-聊城",
"remark": ""
},
"id": 5,
"children": [
{
"key": "1.2.1",
"data": {
"code": "1.2.1",
"name": "东昌府",
"fullname": "山东-聊城-东昌府",
"remark": ""
},
"id": 6,
"children": []
}
]
}
]
}
]
}
下期更新分类树的修改:分类树节点的修改会关联下级的修改,也需要考虑现有节点条件.