layui树形菜单出现多勾（LayUI下拉树TreeSelect的使用解读）
导读：树形结构在实际开发中是很长用的一种结构。最近写了一个LayUI的小案例，其中用到了TreeSelect，这里整理一下。...
树形结构在实际开发中是很长用的一种结构 。最近写了一个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 ，默认get
type: post,
// 占位符
placeholder: 上级菜单,
// 是否开启搜索功能：true/false ，默认false
search: 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
//这里写的 ，新增和修改数据请求都是同一个方法 ，如果是修改会传递一个修改对象的id
public 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()); //节点id
node.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;
@Override
public 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;
@Entity
public class Dept {
private Integer id;
private String name; //部门名称
private String deptName; //部门负责人
private String phone; //电话号
private String number; //编号
private double idx; //排序
@JsonIgnore
private Dept parent;
@JsonIgnore
private List<Dept> children = new ArrayList<>();
@Id
@GeneratedValue
public 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
@CreatedBy
public 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
}
]
以上为个人经验 ，希望能给大家一个参考 ，也希望大家多多支持本站 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！