效果是这样的。主要是结合项目完成效果。这里先创建一个实体类：
@Datapublic class ATree extends TreeNode{private String name;}
接下来是父类：
@Datapublic class TreeNode {protected int id;protected int parentId;protected List<TreeNode> children = new ArrayList<TreeNode>();public void add(TreeNode node) {children.add(node);}}
基石搭建好了，下面是使用，那么使用时有一个工具类：
import lombok.experimental.UtilityClass;import java.util.ArrayList;import java.util.List;/*** */@UtilityClasspublic class TreeUtil {/*** 两层循环实现建树** @param treeNodes 传入的树节点列表* @return*/public <T extends TreeNode> List<T> buildByLoop(List<T> treeNodes, Object root) {List<T> trees = new ArrayList<>();for (T treeNode : treeNodes) {if (root.equals(treeNode.getParentId())) {trees.add(treeNode);}for (T it : treeNodes) {if (it.getParentId() == treeNode.getId()) {if (treeNode.getChildren() == null) {treeNode.setChildren(new ArrayList<>());}treeNode.add(it);}}}return trees;}/*** 使用递归方法建树** @param treeNodes* @return*/public <T extends TreeNode> List<T> buildByRecursive(List<T> treeNodes, Object root) {List<T> trees = new ArrayList<T>();for (T treeNode : treeNodes) {if (root.equals(treeNode.getParentId())) {trees.add(findChildren(treeNode, treeNodes));}}return trees;}/*** 递归查找子节点** @param treeNodes* @return*/public <T extends TreeNode> T findChildren(T treeNode, List<T> treeNodes) {for (T it : treeNodes) {if (treeNode.getId() == it.getParentId()) {if (treeNode.getChildren() == null) {treeNode.setChildren(new ArrayList<>());}treeNode.add(findChildren(it, treeNodes));}}return treeNode;}}
工具类建好以后，写接口请求数据
这里直接上service层的代码，其他的只是单纯的基本方法：
@Overridepublic String getLayuiList() {List<ATree> propertyTree = this.getTree(要查询的树形结构数据列表);return JsonUtils.toJson(propertyTree);}/***属性结构* @param list* @return*/private List<ATree> getTree(List<实体类> list){List<ATree> treeList = list.stream().filter(pro -> !pro.属性().equals(pro.属性())).map(pro -> {ATree node = new ATree();node.setId(Integer.parseInt(pro.getCode()));node.setParentId(Integer.parseInt(pro.getPcode()));node.setName(pro.getName());return node;}).collect(Collectors.toList());return TreeUtil.buildByLoop(treeList, 0);}}
以上是最主要的方法，这里用的表结构里是有父子节点的表结构。
注：后台返回的数据是list，然后转成了json型的string，获取的数据就是layui中的nodes里的数据。
因为用的不是前后端分离的，所以这里直接赋值nodes
下面是页面：
<div class="layui-form-item"><label class="layui-form-label" style="width: 200px">分类</label><div class="layui-input-inline"><div class="layui-unselect layui-form-select downpanel" ><div class="layui-select-title" ><span class="layui-input layui-unselect" id="treeclass">选择</span><input type="hidden" id="grainProperty" name="grainProperty" lay-filter="couponType" layVerify="required" contentStyle="margin-right: 10%"/><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd><ul id="classtree"></ul></dd></dl></div></div>//以上是部分数据，可能有些样式会不一样的，具体再自己解决吧<script>layui.use(['tree', 'layer'], function(){var layer = layui.layer,$ = layui.jquery;layui.tree({elem: '#classtree' //指定元素,click: function(node){ //点击节点回调var $select = $($(this)[0].elem).parents(".layui-form-select");$select.removeClass("layui-form-selected").find(".layui-select-title span").html(node.name).end().find("input:hidden[name='grainProperty']").val(node.id);},nodes: ${propertyList}//这里是前台直接返回的固定数据});$(".downpanel").on("click", ".layui-select-title", function (e) {$(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");$(this).parents(".downpanel").toggleClass("layui-form-selected");layui.stope(e);}).on("click", "dl i", function (e) {layui.stope(e);});$(document).on("click", function (e) {$(".layui-form-select").removeClass("layui-form-selected");});});</script>
具体的要具体使用，这里在我使用的项目中还是可以使用的。
