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

更新時間：2020年03月05日 11:20:58 作者：人生長恨水

這篇文章主要介紹了element-ui樹形控件后臺返回的數(shù)據(jù)+生成組織樹的工具類，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

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

封裝格式：

返回數(shù)據(jù)格式：

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

2018年4月12日修改

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

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

1.把所有數(shù)據(jù)查詢出來放到一個map集合當中，key值為本身數(shù)據(jù)的id，value值為數(shù)據(jù)本身。優(yōu)點是：只對數(shù)據(jù)庫進行一次查詢，避免浪費資源

2.把查詢出來的數(shù)據(jù)判斷其有沒有父id，把沒有父id的存放一個list集合當中。（頂層數(shù)據(jù)）

3.把數(shù)據(jù)進行for循環(huán)，根據(jù)本身數(shù)據(jù)的父id獲取map集合當中的數(shù)據(jù)。例：map.get(entityList.getParentId()),在此之前已經(jīng)把查詢出來的數(shù)據(jù)一一放到了map集合當中，其實這一步就是相當于判斷本身在所有的數(shù)據(jù)中有沒有父親。

4.如果有父親的話進行判斷父親有沒有孩子，有就直接加，沒有就先給父親分配一個空間（房子），有了房子你才能住進去。

順著這個思想，以下是代碼實現(xiàn)。

數(shù)據(jù)的接口類：

可根據(jù)自己本身情況更改接口所要實現(xiàn)的發(fā)放，我這接口類只是實現(xiàn)了某些屬性的get、set方法，寫這個接口類主要是為了下面的工具類，定義泛型T的類型（我是這么理解的，理解的不是很好，網(wǎng)上有很多資料，可自行查看）

/**
 * 樹形數(shù)據(jù)實體接口 
 * @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ù)據(jù)接口類

/**
 * 獲取樹型工具類
 * @author YangWenHui
 *
 */
public class TreeUtil {
	
	//獲取頂層節(jié)點
	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當中，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é)點 放到父節(jié)點childList當中
				treeMap.put(itemTree.getParentId(), data);//把放好的數(shù)據(jù)放回map當中
			}
		}
		return resultList;
	}
}

實體類：

接收數(shù)據(jù)的實體類，其實不用寫get、set方法了，因為@Data這個注解已經(jīng)幫我們寫好了get、set方法了，這個注解可以幫我們節(jié)省時間。

/**
 * 生成樹數(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)用工具類，第一個參數(shù)是默認傳入的頂級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ù)，截圖只截了一部分。