Layui完成树形下拉框
效果是这样的。主要是结合项目完成效果。这里先创建一个实体类:
@Data
public class ATree extends TreeNode{private String name;
}
接下来是父类:
@Data
public class TreeNode {protected int id;protected int parentId;protected List children = new ArrayList();public void add(TreeNode node) {children.add(node);}
}
基石搭建好了,下面是使用,那么使用时有一个工具类:
import lombok.experimental.UtilityClass;import java.util.ArrayList;
import java.util.List;/*** */
@UtilityClass
public class TreeUtil {/*** 两层循环实现建树** @param treeNodes 传入的树节点列表* @return*/public List buildByLoop(List treeNodes, Object root) {List 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 List buildByRecursive(List treeNodes, Object root) {List trees = new ArrayList();for (T treeNode : treeNodes) {if (root.equals(treeNode.getParentId())) {trees.add(findChildren(treeNode, treeNodes));}}return trees;}/*** 递归查找子节点** @param treeNodes* @return*/public T findChildren(T treeNode, List 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;}}
工具类建好以后,写接口请求数据
这里直接上层的代码,其他的只是单纯的基本方法:
@Overridepublic String getLayuiList() {List propertyTree = this.getTree(要查询的树形结构数据列表);return JsonUtils.toJson(propertyTree);}/***属性结构* @param list* @return*/private List getTree(List<实体类> list){List 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);}
}
661cb8e3e3b9525a030644e90cd0fbcf
以上是最主要的方法,这里用的表结构里是有父子节点的表结构。
注:后台返回的数据是list,然后转成了json型的,获取的数据就是layui中的nodes里的数据。
因为用的不是前后端分离的,所以这里直接赋值nodes
下面是页面:
选择
//以上是部分数据,可能有些样式会不一样的,具体再自己解决吧
具体的要具体使用,这里在我使用的项目中还是可以使用的。
其他相关
最新文章
利用区块链等技术,加强对交通运输信用信息的归集共享和分析应用
01-11
319
印尼西爪哇梳邦县发生山体滑坡 已经导致2人死亡
01-11
405
【SpringBoot笔记10】Spring中Bean的6种作用域
01-11
302
ARS548 ARS549RDI 80GHZ毫米波雷达达学习笔记(一)
01-11
331
叠氮PEG修饰二硒化钨 (N3-WSe2;azide
01-11
368
ATFX:黑海运粮遭俄暂停,小麦期货开盘跳涨
01-11
279