element-ui樹形控件后臺返回的數(shù)據(jù)+生成組織樹的工具類
開發(fā)項(xiàng)目的時(shí)候遇到需要在表單中選擇參會人員,根據(jù)不同部門下選擇不同的人,在element-ui中有樹形控件能滿足這種情況,后臺封裝數(shù)據(jù)記錄一下。
封裝格式:
返回?cái)?shù)據(jù)格式:
接收數(shù)據(jù)的pojo類:
2018年4月12日修改
本以為以上的數(shù)據(jù)結(jié)構(gòu)能滿足項(xiàng)目的使用,但是我錯了,當(dāng)時(shí)的數(shù)據(jù)庫中只有不到10條的數(shù)據(jù)并且組織結(jié)構(gòu)非常單一,隨后同事導(dǎo)入了數(shù)據(jù)(6000多條),組織結(jié)構(gòu)也不是如此單一的了,我在項(xiàng)目中固定了三層結(jié)構(gòu)肯定是錯的,要一個(gè)活的組織樹。
網(wǎng)上有很多大牛寫的方法,遞歸的、迭代的, 我在看了很多大牛寫的方法以后,有了實(shí)現(xiàn)思想。
1.把所有數(shù)據(jù)查詢出來放到一個(gè)map集合當(dāng)中,key值為本身數(shù)據(jù)的id,value值為數(shù)據(jù)本身。優(yōu)點(diǎn)是:只對數(shù)據(jù)庫進(jìn)行一次查詢,避免浪費(fèi)資源
2.把查詢出來的數(shù)據(jù)判斷其有沒有父id,把沒有父id的存放一個(gè)list集合當(dāng)中。(頂層數(shù)據(jù))
3.把數(shù)據(jù)進(jìn)行for循環(huán),根據(jù)本身數(shù)據(jù)的父id獲取map集合當(dāng)中的數(shù)據(jù)。例:map.get(entityList.getParentId()),在此之前已經(jīng)把查詢出來的數(shù)據(jù)一 一放到了map集合當(dāng)中,其實(shí)這一步就是相當(dāng)于判斷本身在所有的數(shù)據(jù)中有沒有父親。
4.如果有父親的話進(jìn)行判斷父親有沒有孩子,有就直接加,沒有就先給父親分配一個(gè)空間(房子),有了房子你才能住進(jìn)去。
順著這個(gè)思想,以下是代碼實(shí)現(xiàn)。
數(shù)據(jù)的接口類:
可根據(jù)自己本身情況更改接口所要實(shí)現(xiàn)的發(fā)放,我這接口類只是實(shí)現(xiàn)了某些屬性的get、set方法,寫這個(gè)接口類主要是為了下面的工具類,定義泛型T的類型(我是這么理解的,理解的不是很好,網(wǎng)上有很多資料,可自行查看)
/** * 樹形數(shù)據(jù)實(shí)體接口 * @author YangWenHui * @date 2018年4月11 * @param <T> */ public interface dataTree<T> { public String getId(); public String getParentId(); public void setChildList(List<T> childList); public List<T> getChildList(); }
工具類:
以下的泛型T就是你接收數(shù)據(jù)的實(shí)體類,要繼承上面數(shù)據(jù)接口類
/** * 獲取樹型工具類 * @author YangWenHui * */ public class TreeUtil { //獲取頂層節(jié)點(diǎn) public static <T extends dataTree<T>> List<T> getTreeList(String topId,List<T> entityList){ List<T> resultList = new ArrayList<>();//存儲頂層的數(shù)據(jù) Map<Object, T> treeMap = new HashMap<>(); T itemTree; for(int i=0;i<entityList.size()&&!entityList.isEmpty();i++) { itemTree = entityList.get(i); treeMap.put(itemTree.getId(),itemTree);//把所有的數(shù)據(jù)放到map當(dāng)中,id為key if(topId.equals(itemTree.getParentId()) || itemTree.getParentId() == null) {//把頂層數(shù)據(jù)放到集合中 resultList.add(itemTree); } } //循環(huán)數(shù)據(jù),把數(shù)據(jù)放到上一級的childen屬性中 for(int i = 0; i< entityList.size()&&!entityList.isEmpty();i++) { itemTree = entityList.get(i); T data = treeMap.get(itemTree.getParentId());//在map集合中尋找父親 if(data != null) {//判斷父親有沒有 if(data.getChildList() == null) { data.setChildList(new ArrayList<>()); } data.getChildList().add(itemTree);//把子節(jié)點(diǎn) 放到父節(jié)點(diǎn)childList當(dāng)中 treeMap.put(itemTree.getParentId(), data);//把放好的數(shù)據(jù)放回map當(dāng)中 } } return resultList; } }
實(shí)體類:
接收數(shù)據(jù)的實(shí)體類,其實(shí)不用寫get、set方法了,因?yàn)锧Data這個(gè)注解已經(jīng)幫我們寫好了get、set方法了,這個(gè)注解可以幫我們節(jié)省時(shí)間。
/** * 生成樹數(shù)據(jù)的接收類 * @author YangWenHui * */ @Data public class OtlDeptMenu implements dataTree<OtlDeptMenu>{ private String id; private String parentId; private String name; private List<OtlDeptMenu> childList; }
以上寫好以后就可以用了。
具體使用:
在工具類中自動幫我們排好了層級關(guān)系
/** * 根據(jù)數(shù)據(jù)返回樹型結(jié)構(gòu) * @return */ public List<OtlDeptMenu> getparticipants(){ List<OtlDeptMenu> data = otlMeetPeopleMapper.getDeptName();//接收在數(shù)據(jù)庫中查詢到的數(shù)據(jù) List<OtlDeptMenu> list = new ArrayList<>();//返回的最終集合,可根據(jù)自己返回類型更改。 List<OtlDeptMenu> tree = TreeUtil.getTreeList("0", data);//調(diào)用工具類,第一個(gè)參數(shù)是默認(rèn)傳入的頂級id,和查詢出來的數(shù)據(jù) OtlDeptMenu result = new OtlDeptMenu();//我在已經(jīng)生成好的樹形結(jié)構(gòu)外面有包了一層。視情況而定,可以不用寫 result.setId("0"); result.setName("請選擇參與部門"); result.setChildList(tree); list.add(result);//把對象放到list中,前臺element-ui中的樹形控件需要的是數(shù)組的集合 return list; }
返回的數(shù)據(jù)結(jié)構(gòu):
下面還有很多數(shù)據(jù),截圖只截了一部分。
研究了一天的時(shí)間,速度很慢,也算是漲了經(jīng)驗(yàn)了,畢竟年輕,以后要多多加油。
到此這篇關(guān)于element-ui樹形控件后臺返回的數(shù)據(jù)+生成組織樹的工具類的文章就介紹到這了,更多相關(guān)element樹形控件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue父組件點(diǎn)擊觸發(fā)子組件事件的實(shí)例講解
下面小編就為大家分享一篇vue父組件點(diǎn)擊觸發(fā)子組件事件的實(shí)例講解,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02詳解unplugin?vue?components不能識別組件自動導(dǎo)入類型pnpm
這篇文章主要為大家介紹了unplugin?vue?components不能識別組件自動導(dǎo)入類型pnpm詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01vue-router結(jié)合vuex實(shí)現(xiàn)用戶權(quán)限控制功能
這篇文章主要介紹了vue-router結(jié)合vuex實(shí)現(xiàn)用戶權(quán)限控制功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11Vue路由this.route.push跳轉(zhuǎn)頁面不刷新的解決方案
這篇文章主要介紹了Vue路由this.route.push跳轉(zhuǎn)頁面不刷新的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2021-07-07Vue.js遞歸組件實(shí)現(xiàn)組織架構(gòu)樹和選人功能
這篇文章主要介紹了Vue.js遞歸組件實(shí)現(xiàn)組織架構(gòu)樹和選人功能,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07