加油,新时代打工人!
前端页面
 带树形结构的表格
最近在新项目上加班加点,下面是个实现树形结构的数据表格。
 需求:
 在前端页面表格中展示成树形结构的数据。
 技术:
 后端:Java、Mybatis-Plus、HuTool树形的工具类、Mysql
 前端:Element UI
 表结构
categoriyid	int(11)	NO	PRI		auto_increment
categoriycode	int(10)	YES	UNI		
categoriyname	varchar(50)	YES			
categoriyitemid	int(11)	YES			
status	int(2)	YES		0	
createtime	timestamp	YES		CURRENT_TIMESTAMP	DEFAULT_GENERATED
updatetime	timestamp	YES		CURRENT_TIMESTAMP	DEFAULT_GENERATED

 HuTool工具类Jar
<dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.16</version>
</dependency>
Java实现类代码,用的Mybatis-plus,sql语句都省了
    @Autowiredprivate CategoriyDao categoriyDao;@Overridepublic List<Tree<Object>> getCategoriyList(CategoriyListVo categoriyListVo) {//1.没有条件查询所有的,可以根据自己的需求,加上查询条件,如查询状态已启用的QueryWrapper<CategoriyListVo> queryWrapper = new QueryWrapper<>();List<CategoriyListVo> dataList  = categoriyDao.selectList(queryWrapper);//2.配置TreeNodeConfig config = new TreeNodeConfig();config.setIdKey("id");      //默认id,可以不设置config.setParentIdKey("categoriyitemid");    //父idconfig.setNameKey("categoriyname");   //分类名称config.setDeep(2);      //最大递归深度config.setChildrenKey("children"); //孩子节点//3.转树List<Tree<Object>> treeList = TreeUtil.build(dataList, "0", config, ((object, treeNode) -> {treeNode.setId( object.getCategoriyid().toString());treeNode.setParentId(object.getCategoriyitemid().toString());treeNode.setName(object.getCategoriyname());//扩展字段treeNode.putExtra("categoriycode",object.getCategoriycode());//分类编码treeNode.putExtra("status",object.getStatus().toString());//状态}));return treeList;}
数据返回
 