layui树形梯归显示获取数据显示

首先编写实体类dept

@Data
public class Depts { 
	private Integer deptid;
	//这个字段就是我最后要显示的部门名称，在layui中改
	private String deptname;
	private String headerman;
	private String address;
	private String tphone;
	private Integer parentid;
	//这个list代表递归的子类
	private List<Depts> children;
}

接下来是查询出的数据 查询所有父节点（这里以部门为例子）

	List<Depts> getDepts(); //查询出所有部门主目录
	//查询的sql   ===== select * from Depts where parentid is null

按照父节点查询出所有子节点

	List<Depts> getDeptsparent(int id);//查询所有主目录的子目录
	//查询的sql   =====  select * from Depts where parentid = #{id}

数据通过Controller来得到

// 部门 树形test展示
@ResponseBody
@PostMapping("/treeshow")
public List<Depts> treeshow() throws Exception{
	List<Depts> fdd=deptsService.getDepts();//获取主目录方法
	if(fdd.size()>0){
		//然后遍历，将所有二级菜单添加进来
		for(Depts d:fdd){
			d.setChildren(treeshow2(d.getDeptid()));
		}
	}
	//set好以后整个返回给方法，就能得到一个完整的递归树形json
	return fdd;
}
//梯归查询查询主目录的所有子目录
public List<Depts> treeshow2(int id) throws Exception{
	List<Depts> zdd=deptsService.getDeptsparent(id);//按照主目录的id查找下的所有子目录
	if(zdd.size()>0){
		for(Depts d:zdd){
			d.setChildren(treeshow2(d.getDeptid()));
		}
	}
	return zdd;
}

前端layui显示如下（记得要修改替换/layui/lay.modules下面的tree.js里面的名称（就是修改一下这个js文件））（在js中CTRL+F搜索初始名称为label改为改为自己需要显示的名称比如：deptname（说白了就是去修改tree.js在保存在这里插入代码片））

前端代码

<div id="test1"></div>

javascript代码

<script src="/layui/layui.js"></script>
<script src="/js/jquery-3.3.1.min.js"></script>
<script>
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider','flow','tree'], function({
		var flow = layui.flow;
		var $ = layui.jquery;
		var laydate = layui.laydate //日期
	  , layer = layui.layer //弹层
       var tree = layui.tree;
       
	   $.ajax({
			url: "/Dept/treeshow",     //接口返回的梯归数据方法
			type: "post",
			dataType: "json",
			success: function (data) {
				tree.render({
					elem: '#test1' //绑定元素
					,data:data   //树形显示的数据
					,showCheckbox: true //是否显示复选框
					,id: 'demoId1'
					,click: function(obj){
						var data = obj.data; //获取当前点击的节点数据
						layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
					}
				});
			}, error: function () {
					alert("网络错误");
			}
	});
});
</script>