最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

element-ui樹形控件后臺(tái)返回的數(shù)據(jù)+生成組織樹的工具類

 更新時(shí)間:2020年03月05日 11:20:58   作者:人生長(zhǎng)恨水  
這篇文章主要介紹了element-ui樹形控件后臺(tái)返回的數(shù)據(jù)+生成組織樹的工具類,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

    開發(fā)項(xiàng)目的時(shí)候遇到需要在表單中選擇參會(huì)人員,根據(jù)不同部門下選擇不同的人,在element-ui中有樹形控件能滿足這種情況,后臺(tái)封裝數(shù)據(jù)記錄一下。

    封裝格式:

    返回?cái)?shù)據(jù)格式:

    接收數(shù)據(jù)的pojo類:

2018年4月12日修改

    本以為以上的數(shù)據(jù)結(jié)構(gòu)能滿足項(xiàng)目的使用,但是我錯(cuò)了,當(dāng)時(shí)的數(shù)據(jù)庫(kù)中只有不到10條的數(shù)據(jù)并且組織結(jié)構(gòu)非常單一,隨后同事導(dǎo)入了數(shù)據(jù)(6000多條),組織結(jié)構(gòu)也不是如此單一的了,我在項(xiàng)目中固定了三層結(jié)構(gòu)肯定是錯(cuò)的,要一個(gè)活的組織樹。

    網(wǎng)上有很多大牛寫的方法,遞歸的、迭代的, 我在看了很多大牛寫的方法以后,有了實(shí)現(xiàn)思想。

    1.把所有數(shù)據(jù)查詢出來放到一個(gè)map集合當(dāng)中,key值為本身數(shù)據(jù)的id,value值為數(shù)據(jù)本身。優(yōu)點(diǎn)是:只對(duì)數(shù)據(jù)庫(kù)進(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<>();//存儲(chǔ)頂層的數(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ù)放到上一級(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;
}

以上寫好以后就可以用了。

具體使用:

    在工具類中自動(dòng)幫我們排好了層級(jí)關(guān)系

	/**
	 * 根據(jù)數(shù)據(jù)返回樹型結(jié)構(gòu)
	 * @return
	 */
	public List<OtlDeptMenu> getparticipants(){
		List<OtlDeptMenu> data = otlMeetPeopleMapper.getDeptName();//接收在數(shù)據(jù)庫(kù)中查詢到的數(shù)據(jù)
		List<OtlDeptMenu> list = new ArrayList<>();//返回的最終集合,可根據(jù)自己返回類型更改。
		List<OtlDeptMenu> tree = TreeUtil.getTreeList("0", data);//調(diào)用工具類,第一個(gè)參數(shù)是默認(rèn)傳入的頂級(jí)id,和查詢出來的數(shù)據(jù)
		OtlDeptMenu result = new OtlDeptMenu();//我在已經(jīng)生成好的樹形結(jié)構(gòu)外面有包了一層。視情況而定,可以不用寫
		result.setId("0");
		result.setName("請(qǐng)選擇參與部門");
		result.setChildList(tree);
		list.add(result);//把對(duì)象放到list中,前臺(tái)element-ui中的樹形控件需要的是數(shù)組的集合
		return list;
	}

返回的數(shù)據(jù)結(jié)構(gòu):

下面還有很多數(shù)據(jù),截圖只截了一部分。

研究了一天的時(shí)間,速度很慢,也算是漲了經(jīng)驗(yàn)了,畢竟年輕,以后要多多加油。

到此這篇關(guān)于element-ui樹形控件后臺(tái)返回的數(shù)據(jù)+生成組織樹的工具類的文章就介紹到這了,更多相關(guān)element樹形控件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue使用Vue-cropper實(shí)現(xiàn)圖片裁剪

    Vue使用Vue-cropper實(shí)現(xiàn)圖片裁剪

    這篇文章主要為大家詳細(xì)介紹了Vue使用Vue-cropper實(shí)現(xiàn)圖片裁剪,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-05-05
  • Vue?ECharts實(shí)現(xiàn)機(jī)艙座位選擇展示功能代碼詳解

    Vue?ECharts實(shí)現(xiàn)機(jī)艙座位選擇展示功能代碼詳解

    這篇文章主要介紹了Vue?ECharts實(shí)現(xiàn)機(jī)艙座位選擇展示,本文給大家分享一段簡(jiǎn)短的代碼通過效果圖展示給大家介紹的非常明白,需要的朋友可以參考下
    2022-05-05
  • Vue路由傳遞參數(shù)與重定向的使用方法總結(jié)

    Vue路由傳遞參數(shù)與重定向的使用方法總結(jié)

    路由的本質(zhì)就是一種對(duì)應(yīng)關(guān)系,比如說我們?cè)趗rl地址中輸入我們要訪問的url地址之后,瀏覽器要去請(qǐng)求這個(gè)url地址對(duì)應(yīng)的資源,下面這篇文章主要給大家介紹了關(guān)于Vue路由傳遞參數(shù)與重定向的使用方法,需要的朋友可以參考下
    2022-10-10
  • vue router仿天貓底部導(dǎo)航欄功能

    vue router仿天貓底部導(dǎo)航欄功能

    這篇文章主要介紹了vue router仿天貓底部導(dǎo)航欄功能,需要的朋友可以參考下
    2017-10-10
  • Vue組件之Tooltip的示例代碼

    Vue組件之Tooltip的示例代碼

    這篇文章主要介紹了Vue組件之Tooltip的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-10-10
  • VUE3使用JSON編輯器的詳細(xì)圖文教程

    VUE3使用JSON編輯器的詳細(xì)圖文教程

    最近項(xiàng)目中有用到j(luò)son編輯器,我選用了這款vue的編輯器,看起來也是比較簡(jiǎn)潔,接下來就具體介紹一下它,下面這篇文章主要給大家介紹了關(guān)于VUE3使用JSON編輯器的詳細(xì)圖文教程,需要的朋友可以參考下
    2023-04-04
  • VueCli3.0中集成MockApi的方法示例

    VueCli3.0中集成MockApi的方法示例

    這篇文章主要介紹了VueCli3.0中集成MockApi的方法示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-07-07
  • Vue2為何能通過this訪問到data與methods的屬性

    Vue2為何能通過this訪問到data與methods的屬性

    這篇文章主要介紹了Vue2為何能通過this訪問到data與methods的屬性,文章圍繞主題展開詳細(xì)的內(nèi)容戒殺,具有一定的參考價(jià)值,需要的小伙伴可以參考一下
    2022-09-09
  • 詳解如何在Vue3使用<script lang=“ts“ setup>語(yǔ)法糖

    詳解如何在Vue3使用<script lang=“ts“ setup>語(yǔ)法糖

    本文主要介紹了在Vue3使用<script lang=“ts“ setup>語(yǔ)法糖,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06
  • vue element-ui讀取pdf文件的方法

    vue element-ui讀取pdf文件的方法

    這篇文章主要介紹了vue element-ui讀取pdf文件的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-11-11

最新評(píng)論

枝江市| 徐州市| 乐平市| 岑溪市| 涟源市| 佛教| 宁南县| 资溪县| 库伦旗| 吐鲁番市| 马边| 皋兰县| 新田县| 加查县| 弋阳县| 铜鼓县| 双流县| 上蔡县| 调兵山市| 福州市| 衡山县| 永川市| 平江县| 瑞安市| 肃南| 清远市| 徐闻县| 高青县| 南郑县| 福泉市| 罗山县| 淮北市| 尚志市| 那坡县| 洛南县| 密山市| 聊城市| 郴州市| 新邵县| 于都县| 且末县|