功能需求:从数据库里取出带有id和父级id关系的表里的全部数据,经过服务端处理成树形分层的json,返回给前端插件显示多级结构。
核心步骤:将取出的数据根据每行的id处理成相同格式的数组形式以后进行递归,没有父级id的作为根节点层,有父级id的讲自己写为父级的子级层
示例如下:
var getRiskJson = function (data,callback){
console.log("getRiskJson data length:"+data.length);
var riskTree = {};
var riskdata = {}; //risks
for(var i in data){
var row = data[i];
riskdata[row.id] = row;
}
for(var i in riskdata){
// console.log(riskdata[i]);
makeRiskTree(riskTree,riskdata,riskdata[i]);
}
callback(riskTree);
}
function makeRiskTree(risktree,risks,risk) { //树 正在堆的父级 子集
if(!risk.sub){//如果本条没有子集 添加本条
risk.sub = {};
}
if(risk.super_id){ //如果有父级 就取出自己做成父级的数组形式
var super_id = risks[risk.super_id];
console.log('now super_id,risk.super_id are:'+super_id+"———n(*≧▽≦*)n———"+risk.super_id);
makeRiskTree(risktree,risks,super_id);
super_id.sub[risk.id] = risk;
}else{ //若没有父级 则自己就是根节点
risktree[risk.id]= risk;
}
};
//测试数据
var data = [
{
"id": "0013bf81-1f4f-4a8b-8900-c894d4afd890",
"super_id": null,
"level": "1",
"content": "配电",
"status": "1",
"createdAt": null,
"updatedAt": null,
"parentContent": null
},
{
"id": "00b0bd76-a9be-4f1e-94ea-6847090e8a55",
"super_id": null,
"level": "1",
"content": "变电",
"status": "1",
"createdAt": null,
"updatedAt": null,
"parentContent": null
},
{
"id": "1111181-1f4f-4a8b-8900-c894d4afd890",
"super_id": "2213bf81-1f4f-4a8b-8900-c894d4afd890",
"level": "4",
"content": "过往行人进入作业现场",
"status": "1",
"createdAt": "2017-03-08T07:42:20.000Z",
"updatedAt": "2017-03-25T07:42:24.000Z",
"parentContent": "带电断、接引线"
},
{
"id": "1113bf81-1f4f-4a8b-8900-c894d4afd890",
"super_id": "0013bf81-1f4f-4a8b-8900-c894d4afd890",
"level": "2",
"content": "配电带电作业",
"status": "1",
"createdAt": null,
"updatedAt": null,
"parentContent": "配电"
},
{
"id": "11b0bd76-a9be-4f1e-94ea-6847090e8a55",
"super_id": "00b0bd76-a9be-4f1e-94ea-6847090e8a55",
"level": "2",
"content": "变电操作",
"status": "1",
"createdAt": null,
"updatedAt": null,
"parentContent": "变电"
},
{
"id": "2213bf81-1f4f-4a8b-8900-c894d4afd890",
"super_id": "1113bf81-1f4f-4a8b-8900-c894d4afd890",
"level": "3",
"content": "带电断、接引线",
"status": "1",
"createdAt": null,
"updatedAt": null,
"parentContent": "配电带电作业"
},
{
"id": "3313bf81-1f4f-4a8b-8900-c894d4afd890",
"super_id": "2213bf81-1f4f-4a8b-8900-c894d4afd890",
"level": "4",
"content": "绝缘斗臂车被其它车辆碰撞;过往行人进入作业现场;高空落物伤人。",
"status": "1",
"createdAt": null,
"updatedAt": null,
"parentContent": "带电断、接引线"
}
];
//data的格式是直接从mysql里select出来的 数据结构为:
// CREATE TABLE `t_risk_point` (
// `id` varchar(64) NOT NULL,
// `super_id` varchar(64) DEFAULT NULL,
// `level` varchar(64) DEFAULT NULL,
// `content` varchar(64) DEFAULT NULL,
// `status` varchar(64) DEFAULT NULL,
// `createdAt` datetime DEFAULT NULL,
// `updatedAt` datetime DEFAULT NULL,
// PRIMARY KEY (`id`)
// ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
getRiskJson(data,function(data){
console.log("Print Tree :"+JSON.stringify(data));
});
递归好以后:
{
"0013bf81-1f4f-4a8b-8900-c894d4afd890": {
"id": "0013bf81-1f4f-4a8b-8900-c894d4afd890",
"super_id": null,
"level": "1",
"content": "配电",
"status": "1",
"createdAt": null,
"updatedAt": null,
"parentContent": null,
"sub": {
"1113bf81-1f4f-4a8b-8900-c894d4afd890": {
"id": "1113bf81-1f4f-4a8b-8900-c894d4afd890",
"super_id": "0013bf81-1f4f-4a8b-8900-c894d4afd890",
"level": "2",
"content": "配电带电作业",
"status": "1",
"createdAt": null,
"updatedAt": null,
"parentContent": "配电",
"sub": {
"2213bf81-1f4f-4a8b-8900-c894d4afd890": {
"id": "2213bf81-1f4f-4a8b-8900-c894d4afd890",
"super_id": "1113bf81-1f4f-4a8b-8900-c894d4afd890",
"level": "3",
"content": "带电断、接引线",
"status": "1",
"createdAt": null,
"updatedAt": null,
"parentContent": "配电带电作业",
"sub": {
"1111181-1f4f-4a8b-8900-c894d4afd890": {
"id": "1111181-1f4f-4a8b-8900-c894d4afd890",
"super_id": "2213bf81-1f4f-4a8b-8900-c894d4afd890",
"level": "4",
"content": "过往行人进入作业现场",
"status": "1",
"createdAt": "2017-03-08T07:42:20.000Z",
"updatedAt": "2017-03-25T07:42:24.000Z",
"parentContent": "带电断、接引线",
"sub": {
}
},
"3313bf81-1f4f-4a8b-8900-c894d4afd890": {
"id": "3313bf81-1f4f-4a8b-8900-c894d4afd890",
"super_id": "2213bf81-1f4f-4a8b-8900-c894d4afd890",
"level": "4",
"content": "绝缘斗臂车被其它车辆碰撞;过往行人进入作业现场;高空落物伤人。",
"status": "1",
"createdAt": null,
"updatedAt": null,
"parentContent": "带电断、接引线",
"sub": {
}
}
}
}
}
}
}
},
"00b0bd76-a9be-4f1e-94ea-6847090e8a55": {
"id": "00b0bd76-a9be-4f1e-94ea-6847090e8a55",
"super_id": null,
"level": "1",
"content": "变电",
"status": "1",
"createdAt": null,
"updatedAt": null,
"parentContent": null,
"sub": {
"11b0bd76-a9be-4f1e-94ea-6847090e8a55": {
"id": "11b0bd76-a9be-4f1e-94ea-6847090e8a55",
"super_id": "00b0bd76-a9be-4f1e-94ea-6847090e8a55",
"level": "2",
"content": "变电操作",
"status": "1",
"createdAt": null,
"updatedAt": null,
"parentContent": "变电",
"sub": {
}
}
}
}
}