LayUI下拉樹TreeSelect的使用解讀

更新時(shí)間：2022年10月26日 09:21:06 作者：小馬同學(xué)

這篇文章主要介紹了LayUI下拉樹TreeSelect的使用解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

顯示效果圖

因?yàn)門reeSelect不是LayUI官方開發(fā)的，而是第三方基于LayUI開發(fā)的，所以需要先用Layui引入一下文件。

之后頁(yè)面只需要引入LayUI的CSS和JS就可以了。

頁(yè)面給一個(gè)標(biāo)簽，用于顯示TreeSelect下拉樹選中的內(nèi)容值，獲取選中值時(shí)，直接獲取標(biāo)簽值，就是選中的內(nèi)容值。

<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',
            // 異步獲取下拉樹需要顯示的數(shù)據(jù)
            data: 'dept/treeSelect',
            // 異步加載方式：get/post，默認(rèn)get
            type: 'post',
            // 占位符
            placeholder: '上級(jí)菜單',
            // 是否開啟搜索功能：true/false，默認(rèn)false
            search: true,
            // 一些可定制的樣式
            style: {
                folder: {
                    enable: true
                },
                line: {
                    enable: true
                }
            },
            // 點(diǎn)擊節(jié)點(diǎn)回調(diào)
            click: function(d){
                //console.log(d);
            },
            // 加載完成后的回調(diào)函數(shù)
            success: function (d) {
                //console.log(d);
                // 選中節(jié)點(diǎn)，根據(jù)id篩選，一般修改時(shí)會(huì)有默認(rèn)選中狀態(tài)，可以在這里設(shè)置
                //treeSelect.checkNode('tree', 2);
                //console.log($('#tree').val());
                // 獲取zTree對(duì)象，可以調(diào)用zTree方法
                //var treeObj = treeSelect.zTree('tree');
                // console.log(treeObj);
                // 刷新樹結(jié)構(gòu)
                //treeSelect.refresh('tree');
            }
        });
    });
 
</script>

后臺(tái)響應(yīng)加載下拉樹數(shù)據(jù)方法（有詳細(xì)注釋）

@RequestMapping(value="/treeSelect")
@ResponseBody
//這里寫的，新增和修改數(shù)據(jù)請(qǐng)求都是同一個(gè)方法，如果是修改會(huì)傳遞一個(gè)修改對(duì)象的id
public Object treeSelect(Integer id) {
    Sort sort = Sort.by("idx");    //排序
    Specification<Dept> spec = buildSpec1();    //查詢條件，查詢父節(jié)點(diǎn)為null的元素
    List<Dept> list = deptService.findAll(spec,sort);    //查詢，Dept為實(shí)體類
    return buildTree(list, id);    //轉(zhuǎn)換為treeSelect指定的JSON數(shù)據(jù)格式方法
}
 
private Object buildTree(List<Dept> list, Integer id) {
    List<HashMap<String, Object>> result=new ArrayList<>();
    for (Dept dept : list) {
        if(dept.getId() != id) {    //判斷如果是修改的話，修改的節(jié)點(diǎn)及下級(jí)節(jié)點(diǎn)不顯示，也就不加載
            HashMap<String, Object> node=new HashMap<>();
            node.put("id", dept.getId());    //節(jié)點(diǎn)id
            node.put("name",dept.getName());    //節(jié)點(diǎn)數(shù)據(jù)名稱
            node.put("open", false);        //是否展開
            node.put("checked", false);    //是否選中，前臺(tái)也可以設(shè)置是否選中
            if(dept.getChildren().size() != 0) {    //如果下級(jí)節(jié)點(diǎn)不為空，
                node.put("children",buildTree(dept.getChildren(), id));    //遞歸加載下級(jí)節(jié)點(diǎn)
            }
            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"));  //查詢父節(jié)點(diǎn)為null的元素
            rules.add(parent);
            return cb.and(rules.toArray(new Predicate[rules.size()]));
        }
 
    };
    return specification;
}

Dept實(shí)體類代碼

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;    //部門負(fù)責(zé)人
    private String phone;   //電話號(hào)
    private String number;  //編號(hào)
    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() {
    }
}

這里后臺(tái)持久層是使用的Spring-Data-Jpa，如果你是用的其他持久層框架，只要返回的JSON數(shù)據(jù)格式一樣就可以了。

JSON數(shù)據(jù)格式

JSON數(shù)據(jù)

[
	{
		"children": [	//下級(jí)節(jié)點(diǎn)
			{
				"children": [
					{
						"name": "測(cè)試",
						"checked": false,
						"id": 30,
						"open": false
					}, {
						"name": "開發(fā)",
						"checked": false,
						"id": 31,
						"open": false
					}, {
						"children": [
							{
								"name": "測(cè)試節(jié)點(diǎn)",
								"checked": false,
								"id": 36,
								"open": false
							}
						],
						"name": "測(cè)試",
						"checked": false,
						"id": 32,
						"open": false
					}
				],
				"name": "技術(shù)部",
				"checked": false,
				"id": 2,
				"open": false
			}, {
				"name": "財(cái)務(wù)部",
				"checked": false,
				"id": 19,
				"open": false
			}
		],
		"name": "某某公司",	//節(jié)點(diǎn)內(nèi)容
		"checked": false,	//是否選中
		"id": 1,		//id
		"open": false	//是否展開
	}, {
		"name": "測(cè)試",
		"checked": false,
		"id": 33,
		"open": false
	}
]

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: