javascript将平行的拥有上下级关系的数据转换成树形结构
阅读原文时间:2023年07月09日阅读:1

转换函数

var Littlehow = {};
/**
* littlehow 2019-05-15
* 平行数据树形转换器
* @type {{format: tree.format, sort: tree.sort, map: (function(*, *): {root, da})}}
*/
Littlehow.tree = {
/**
* 将平行结果转换成树形结构,父编号不可为空,如果为最高,则可以设置root等字样
* 如果有排序字段,将排序完成后返回
* 如:data:[{id:'1', parentId:'root', name:'test'}, {id:'2', parentId:'1', name:'test1'},{id:'3', parentId:'1', name:'test2'}]
* format:{id:'id', root:'root', 'pid':'parentId', child:'children'}
* 解析后的数据形式为:
* [{id:'1','parentId':'root',name:'test', children:[{id:'2',parentId:'1',name:'test1'},{id:'3',parentId:'1',name:'test2'}]}]
* @param data -- 需要转换的数据
* @param format -- 转换格式 {id:'', root:'', pid:'', child:'', sort:{field:'', direct:1}}
* @return {*} 转换后的数据
*/
format : function(data, format) {
//如果data,没有数据,则将data原样返回
if (!data || data.length <= 0) return data; var map = this.map(data, format); //再遍历原数据进行树形填充 for (var i = 0, len = data.length; i < len; i++) { var d = data[i]; if (map.dm[d[format.pid]]) { map.dm[d[format.pid]][format.child].push(d); } } //最后将root排序后返回 this.sort(map.root, format); return map.root; }, /** * 平行数据映射为map * @param data -- 平行数据 * @param format -- tree格式化信息 * @return {{d, root}} -- 返回数据和根数据map */ map : function(data, format) { var dataMap = {};//全数据映射 var root = [];//根 for (var i = 0, len = data.length; i < len; i++) { var d = data[i]; //初始化child字段,如果不想要这里初始化也可以在树形填充出进行判断初始化 d[format.child] = []; dataMap[d[format.id]] = d; if (data[i][format.pid] === format.root) {//将root记录到root数组 root.push(d); } } return {dm : dataMap, root : root}; }, /** * 进行排序 format.sort格式为sort:{field:'', direct:1},其中direct=1为正序,direct=-1为逆序 * @param result -- 结果集 * @param format -- 格式化 */ sort : function(result, format) { if (!format.sort) return;//没有排序配置则不进行排序 result.sort(function(a, b) { var as = a[format.sort.field]; var bs = b[format.sort.field]; return (as - bs) * format.sort.direct; }); //如果result中有child,则继续进行排序 for (var i = 0, len = result.length; i < len; i++) { if (result[i][format.child].length > 0) {
this.sort(result[i][format.child], format);
}
}
}
};





tree case