LayUI下拉树TreeSelect的使用解读(layui树形下拉框)

这篇文章主要介绍了LayUI下拉树TreeSelect的使用解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教 目录

推荐整理分享LayUI下拉树TreeSelect的使用解读(layui树形下拉框)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:layui下拉树表格,layui下拉框数据库,layui 树形下拉列表,下拉框树形结构,layui下拉树表格,layui下拉树表格,下拉框树形结构,layui 树形下拉列表,内容如对您有帮助，希望把文章链接给更多的朋友！

显示效果图JS渲染样式代码后台响应加载下拉树数据方法（有详细注释）Dept实体类代码JSON数据格式JSON数据

树形结构在实际开发中是很长用的一种结构。最近写了一个LayUI的小案例，其中用到了TreeSelect，这里整理一下。

TreeSelect官网地址：https://fly.layui.com/extend/treeSelect/

显示效果图

因为TreeSelect不是LayUI官方开发的，而是第三方基于LayUI开发的，所以需要先用Layui引入一下文件。

之后页面只需要引入LayUI的CSS和JS就可以了。

页面给一个标签，用于显示TreeSelect下拉树选中的内容值，获取选中值时，直接获取标签值，就是选中的内容值。

<input type="text" name="parentId" id="tree2" lay-filter="tree2" class="layui-input" />JS渲染样式代码<script type="text/javascript">layui.use(["treeSelect", "form", "tree"], function () {var form = layui.form;var tree = layui.tree;var treeSelect = layui.treeSelect;treeSelect.render({// 选择器elem: '#tree',// 异步获取下拉树需要显示的数据data: 'dept/treeSelect',// 异步加载方式：get/post，默认gettype: 'post',// 占位符placeholder: '上级菜单',// 是否开启搜索功能：true/false，默认falsesearch: true,// 一些可定制的样式style: {folder: {enable: true},line: {enable: true}},// 点击节点回调click: function(d){//console.log(d);},// 加载完成后的回调函数success: function (d) {//console.log(d);// 选中节点，根据id筛选，一般修改时会有默认选中状态，可以在这里设置//treeSelect.checkNode('tree', 2);//console.log($('#tree').val());// 获取zTree对象，可以调用zTree方法//var treeObj = treeSelect.zTree('tree');// console.log(treeObj);// 刷新树结构//treeSelect.refresh('tree');}});});</script>后台响应加载下拉树数据方法（有详细注释）@RequestMapping(value="/treeSelect")@ResponseBody//这里写的，新增和修改数据请求都是同一个方法，如果是修改会传递一个修改对象的idpublic Object treeSelect(Integer id) {Sort sort = Sort.by("idx"); //排序Specification<Dept> spec = buildSpec1(); //查询条件，查询父节点为null的元素List<Dept> list = deptService.findAll(spec,sort); //查询，Dept为实体类return buildTree(list, id); //转换为treeSelect指定的JSON数据格式方法}private Object buildTree(List<Dept> list, Integer id) {List<HashMap<String, Object>> result=new ArrayList<>();for (Dept dept : list) {if(dept.getId() != id) { //判断如果是修改的话，修改的节点及下级节点不显示，也就不加载HashMap<String, Object> node=new HashMap<>();node.put("id", dept.getId()); //节点idnode.put("name",dept.getName()); //节点数据名称node.put("open", false); //是否展开node.put("checked", false); //是否选中，前台也可以设置是否选中if(dept.getChildren().size() != 0) { //如果下级节点不为空，node.put("children",buildTree(dept.getChildren(), id)); //递归加载下级节点}result.add(node);}}return result;}public Specification<Dept> buildSpec1() {Specification<Dept> specification = new Specification<Dept>() {private static final long serialVersionUID = 1L;@Overridepublic Predicate toPredicate(Root<Dept> root, CriteriaQuery<?> query, CriteriaBuilder cb) {HashSet<Predicate> rules=new HashSet<>();Predicate parent = cb.isNull(root.get("parent")); //查询父节点为null的元素rules.add(parent);return cb.and(rules.toArray(new Predicate[rules.size()]));}};return specification;}Dept实体类代码import com.fasterxml.jackson.annotation.JsonIgnore;import org.springframework.data.annotation.CreatedBy;import javax.persistence.*;import java.util.ArrayList;import java.util.List;@Entitypublic class Dept {private Integer id;private String name; //部门名称private String deptName; //部门负责人private String phone; //电话号private String number; //编号private double idx; //排序@JsonIgnoreprivate Dept parent;@JsonIgnoreprivate List<Dept> children = new ArrayList<>();@Id@GeneratedValuepublic Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getDeptName() {return deptName;}public void setDeptName(String deptName) {this.deptName = deptName;}public String getPhone() {return phone;}public void setPhone(String phone) {this.phone = phone;}public String getNumber() {return number;}public void setNumber(String number) {this.number = number;}public double getIdx() {return idx;}public void setIdx(double idx) {this.idx = idx;}@ManyToOne@CreatedBypublic Dept getParent() {return parent;}public void setParent(Dept parent) {this.parent = parent;}@OneToMany(cascade=CascadeType.ALL,mappedBy="parent")@OrderBy(value="idx")public List<Dept> getChildren() {return children;}public void setChildren(List<Dept> children) {this.children = children;}public Dept(Integer id, String name, String deptName, String phone, String number, double idx, Dept parent, List<Dept> children) {this.id = id;this.name = name;this.deptName = deptName;this.phone = phone;this.number = number;this.idx = idx;this.parent = parent;this.children = children;}public Dept(Integer id) {this.id = id;}public Dept() {}}

这里后台持久层是使用的Spring-Data-Jpa，如果你是用的其他持久层框架，只要返回的JSON数据格式一样就可以了。

JSON数据格式

JSON数据[{"children": [//下级节点{"children": [{"name": "测试","checked": false,"id": 30,"open": false}, {"name": "开发","checked": false,"id": 31,"open": false}, {"children": [{"name": "测试节点","checked": false,"id": 36,"open": false}],"name": "测试","checked": false,"id": 32,"open": false}],"name": "技术部","checked": false,"id": 2,"open": false}, {"name": "财务部","checked": false,"id": 19,"open": false}],"name": "某某公司",//节点内容"checked": false,//是否选中"id": 1,//id"open": false//是否展开}, {"name": "测试","checked": false,"id": 33,"open": false}]

以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。