js文章列表的树形结构输出

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

文章表设计成这样了

后端直接给了无任何处理的json数据，现在要前端实现树形结构的输出，其实后端处理更简单写，不过既然来了就码出来

var doclist = [{
"id": 1,
"level": 1,
"parent_id": 0,
"title": "A"
}, {
"id": 2,
"level": 2,
"parent_id": 1,
"title": "A1"
}, {
"id": 333,
"level": 2,
"parent_id": 1,
"title": "A2"
}, {
"id": 10,
"level": 3,
"parent_id": 5,
"title": "B2"
}, {
"id": 7,
"level": 3,
"parent_id": 2,
"title": "A3"
}, {
"id": 4,
"level": 1,
"parent_id": 0,
"title": "B"
}, {
"id": 5,
"level": 2,
"parent_id": 4,
"title": "B1"
}, {
"id": 11,
"level": 2,
"parent_id": 4,
"title": "B3"
}, {
"id": 12,
"level": 3,
"parent_id": 11,
"title": "B4"
}, {
"id": 133,
"level": 3,
"parent_id": 11,
"title": "B5"
}];function getDocTree(doclist) {
var findDoc = function(doc_id) {
for (var i = 0; i < doclist.length; i++) {
if (doclist[i].id == doc_id) {
return doclist[i];
}
}
}
var getSeqnum = function(doc_id) {
var doc = findDoc(doc_id)
if (doc.level == 1) {
return '' + doc_id
} else {
return getSeqnum(doc.parent_id) + ',' + doc_id; }
}
for (var i = 0; i < doclist.length; i++) {
var doc = doclist[i]
doc.seqNum = getSeqnum(doc.id)
} return doclist.sort(function(a, b) {
var al = a.seqNum.split(','),
bl = b.seqNum.split(',');
var minLen = al.length > bl.length ? bl.length : al.length;
var result = 0
for (var i = 0; i < minLen; i++) {
if (al[i] > bl[i]) {
result = 1;
break;
}
if (al[i] < bl[i]) {
result = -1;
break;
}
}
if (result == 0 && al.length > bl.length) result = 1;
if (result == 1 && al.length > bl.length) result = 1;
if (result == 1 && al.length == 1) result = 1;
if (result == 1 && al.length > 1 && al.length < bl.length) result = -1; return result;
})
}function getDocTree2(doclist) {
//get max level
var maxLevel = 1;
for (var i = 0; i < doclist.length; i++) {
var doc = doclist[i]
if (parseInt(doc.level) > maxLevel) {
maxLevel = parseInt(doc.level)
}
} //loop level
var parentDoc = []
for (var L = 1; L <= maxLevel; L++) {
var subDoc = []
for (var i = 0; i < doclist.length; i++) {
var doc = doclist[i]
if (doc.level == L) {
parentDoc.push(doc)
}
}
}}//测试
var doclist2 = [{
"id": 1,
"level": 1,
"parent_id": 0,
"title": "A"
}, {
"id": 5,
"level": 2,
"parent_id": 1,
"title": "A3"
}, {
"id": 4,
"level": 1,
"parent_id": 0,
"title": "B"
}, {
"id": 6,
"level": 2,
"parent_id": 4,
"title": "B2"
}, {
"id": 7,
"level": 2,
"parent_id": 4,
"title": "B3"
}, {
"id": 3,
"level": 2,
"parent_id": 1,
"title": "A2"
}, {
"id": 2,
"level": 2,
"parent_id": 1,
"title": "A1"
}];doclist = getDocTree(doclist)//增强显示测试结果
for (var i = 0; i < doclist.length; i++) {
var doc = doclist[i] var ots = ''
for (var s = 1; s < doc.level; s++) {
ots += '__'
}
ots += doc.title
console.log(ots, doc.seqNum)
}

输出结果，排序后的数组直接遍历就能展示出来了

A 1
__A1 1,2
__A2 1,333
____A3 1,2,7
B 4
__B3 4,11
__B1 4,5
____B4 4,11,12
____B5 4,11,133
____B2 4,5,10