二話不說先上程式碼

import _ from 'underscore'
import $ from 'jquery'

let spreadArr = []

//功能id樹的方法
export function changeToTree(data,name,id) {
	//原始資料 名稱陣列 id陣列
	return createTreeData(getAllNodes(data, name, id))
}

//統計日誌樹的方法
export function statisticsLogTree(data,name,id,sj,pipes) {
	//原始資料 名稱陣列 id陣列 升降序的陣列 展開的層數
 


	//獲取總層數
	const pipesNum = id.length

	//為了保證最後樹中所有的key唯一，用‘-’拼接
	let copyData = $.extend({}, true, data)
	let idArrList = []

	//對copyData進行排序
	for (let i = 1; i <= pipesNum; i++){
		if (sj[i - 1] == '1') {
			copyData[`listReturn${i}`].reverse()
		}
	}

	//修改id值 得修改所有的list 因為要取得順序
	for (let i = 1; i <=
 
 pipesNum; i++) {
		copyData[`listReturn${i}`] = copyData[`listReturn${i}`].map((v) =>{
			for (let j = 1; j <= i; j++) {
				v[id[j - 1]] = (v[id[j - 2]] ? (v[id[j - 2]] + '-' + v[id[j - 1]]) : v[id[j - 1]]).toString()
			}
			return v
		})
	}

	//獲取id的list 用來確定順序
	for (let i = 1; i <= pipesNum;
 
 i++) {
		idArrList.push(_.uniq(_.pluck(copyData[`listReturn${i}`], id[i - 1])).filter(val=>val))
	}

	//把最後一層的資料先拿出來 最後要做樹用
	let treeDate = copyData[`listReturn${pipesNum}`].map(item =>{
		return $.extend({}, true, item)
	})

	//迴圈把count拼到name中去
	for (let i = 1; i <= pipesNum; i++ ){
		copyData[`listReturn${i}`].map(v=>{
			treeDate.map((item, index) =>{
				if (v[id[i - 1]] == item[id[i - 1]]) {
					treeDate[index][name[i - 1]] = `${v[name[i - 1]]}  ${v.count}`
				}
			})
		})
	}

	//獲取展開層數的節點key
	spreadArr = []
	for (let i = 0; i < pipes; i++ ){
		if (idArrList[i]) {
			spreadArr = [...spreadArr, ...idArrList[i]]
		}

	}

	let result = createTreeData(getAllNodes(treeDate, name, id, idArrList))
	result['spreadArr'] = spreadArr

	return result
}

function getAllNodes(data, nameArr, idArr, idArrList) {

	const targetArr = []
	let obj = {
		key: null,
		parent_key: null,
		title: null
	}

	let idList = []

	if (idArrList) {
		idList = idArrList
	} else {
		idList = idArr.map(item => {
			return _.uniq(_.pluck(data, item)).filter(val=>val)
		})
	}

	idList.map((item, index)=>{
		item.map(el=>{
			let flag = true
			data.map((item)=>{
				if (item[idArr[index]] === el && flag) {
					obj.key = el
					obj.title = item[nameArr[index]]
					if (index === 0) {
						obj.parent_key = '#'
					} else {
						if (!item[idArr[index - 1]]) {
							obj.parent_key = item[idArr[0]]
						} else {
							obj.parent_key = item[idArr[index - 1]]
						}
					}
					targetArr.push({...obj})
					flag = false
				}
			})

		})
	})


	return targetArr
}

function createTreeData(data) {
	let initData = {key:'#', children:[]}

	$.each(data, function(i, n) {
		n['children']=[];
		initData = initTreeData(initData, n);
	});

	return initData
}

function initTreeData(b, d) {
	if(b.key == d.parent_key) {
		b['children'].push(d);
		return b;
	}
	if(0 == b['children'].length) {
		return b;
	}
	$.each(b['children'], function(i, n) {
		b['children'][i]= initTreeData(b['children'][i], d);
	});
	return b;
}

主要方法解釋

statisticsLogTree()該方法主要是講後臺返回的介面轉換成需要的格式，比如：可能在title裡顯示總數；
getAllNodes()該方法主要是把資料拆分成一個一個小節，每一節都有自己的id，還有它的父id，還有他的children們；
createTreeData()這個方法就是組裝樹的過程，方法很簡單，採用了遞迴的思想，從樹的根部開始拼整棵樹，如果有children就把此方法再遞迴呼叫，如此下來就可以拼成整個樹！、
具體的程式碼實現，比較複雜的部分都寫了註釋。