/*
* zTree数据是扁平化数据,element tree是结构化数据,需要找到各项之间的关系,简单来讲就是找爸爸,谁的id对应我的pid谁就是我爸爸
* 此时我们可以遍历出一个以id为key值的map(idMap),这里用到对象的继承特性
* 然后通过一个方法将map中的各项关系走一遍,就是我们说的找爸爸,利用对象的继承属性,我们可以得到一个体积比原idMap大的map,根节点上的所有数据就是我们想要的element tree数据
* 打了debugger,可以通过chrome调试工具了解工作原理
*/
function ztreeToElementTree(data, config){
var id = config.id || 'id' // 定义ztree数据存储id(自身的id)的key值,可以自定义但一般都是id、pid这种
var pid = config.pid || 'pid' // 定义ztree数据存储pid(父id)的key值
var children = config.children || 'children' // 定义生成的element tree存储子节点的key,可以在element中规定defaultProps: {children: 'children'}
var idMap = {} // 将原始数据转化为以id为key的map
var elementTree = [] // 输出的element tree数据
data.forEach(item => {
idMap[item.id] = item
})
data.forEach(item => {
debugger
if (idMap[item.pid]) { // 该item项有爸爸,放到对应的父节点下
!idMap[item.pid].hasOwnProperty(children) && (idMap[item.pid][children] = [])
idMap[item.pid][children].push(item)
} else { // 根节点
elementTree.push(item)
}
});
return elementTree
}
var data = [{id: 2, pid: 1}, {id: 3, pid: 1}, {id: 4, pid: 2}, {id: 5, pid: 3}, {id: 6, pid: 3}, {id: 7, pid: 6}, {id: 1, pid: 0}]
ztreeToElementTree(data,{})