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

最新推荐文章于 2025-04-24 21:39:39 发布

weixin_34321753

最新推荐文章于 2025-04-24 21:39:39 发布

阅读量210

点赞数

文章标签：后端 json 前端 ViewUI

本文介绍了一种在前端实现树形结构数据排序的方法。通过计算每个节点的序列号并进行排序，可以方便地展示出层级关系。适用于后端提供原始JSON数据的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章表设计成这样了

后端直接给了无任何处理的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