jQuery生成多层复杂表头方法

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/196866.html

1. 实现思路
2. 数据
3. 方法一
4. 方法二

最近在做公司系统时用到了表格，而表格的表头是根据一个数组生成，如果只是普通的单层表头很容易实现，但是如果是复杂的表头，就要挺麻烦的，主要是我的数组结构是树形数组，实现需要递归，递归过程需要考虑到<th> 的 colspan和rowspan 的设置。

实现思路

设每一项为 item：

• 求colspan的值 ：item没有children则colspan=1；如果有children，colspan的值则为它的所有children的colspan的总和()；
• 求rowapsn的值：item有children，它的rowspan=1；item没有children，rowspan 的值为最深层级+ 1-当前层级(maxrank+1 - rank)

数据

var columns = [
    {
        codeName: '系统分析师',
        key: 'GradeOrLevel',
        children: [
            {
                codeName: '初级',
                codeVlaue: 'BA-P1'
            },
            {
                codeName: '中级',
                codeVlaue: 'BA-P2'
            },
            {
                codeName: '高级',
                codeVlaue: 'BA-P3'
            }
        ]
    },{
        codeName: 'UI',
        key: 'GradeOrLevel',
        children: [
            {
                codeName: '初级',
                codeVlaue: 'UI-P1'
            },
            {
                codeName: '中级',
                codeVlaue: 'UI-P2'
            },
            {
                codeName: '高级',
                codeVlaue: 'UI-P3'
            }
        ]
    },
    {
        codeName: '开发工程师',
        key: 'GradeOrLevel',
        children: [
            {
                codeName: '初级',
                codeVlaue: 'AD-P1'
            },
            {
                codeName: '中级',
                codeVlaue: 'AD-P2'
            },
            {
                codeName: '高级级',
                codeVlaue: 'AD-P3'
            }
        ]
    },
];

方法一

var trs = [];
start = new Date().getTime();
foo(columns);

function pushTrs(arr) {
    var rank = arr[0].rank;
    if (trs[rank]) {
        $.merge(trs[rank], arr)
    } else {
        trs[rank] = arr;
    }
}

function render() {
    var $thead = $('<thead></thead>');
    var len = trs.length;
    for (var i = 0; i < trs.length; i++) {
        var $tr = $('<tr></tr>');
        for (var j = 0; j < trs[i].length; j++) {
            var $th = $('<th>' + trs[i][j].codeName + '</th>');
            $th.attr('colspan', trs[i][j].colspan);
            if (trs[i][j].rowspan) {
                $th.attr('rowspan', trs[i][j].rowspan);
            } else {
                $th.attr('rowspan', len - trs[i][j].rank);
            }
            $tr.append($th);
        }
        $thead.append($tr);
    }
    $('#myTable table').append($thead);
    end = new Date().getTime();
    console.log(end - start);
}

function foo(arr, parent) {
    for (var i = 0; i < arr.length; i++) {
        len = arr[i].children ? arr[i].children.length : 0;
        arr[i].rank = parent ? parent.rank + 1 : 0;
        if (len > 0) {//children 存在
            arr[i].rowspan = 1;
            foo(arr[i].children, arr[i]);
        } else {//children 不存在
            arr[i].colspan = 1;
        }
        if (parent) {//parent 的 colspan 为 children 的 colspan 总和
            parent.colspan = parent.colspan ? parent.colspan : 0;
            parent.colspan += arr[i].colspan;
        }
    }

    pushTrs(arr);

    if (arr[0].rank == 0) {//最后一次递归结束
        render();
    }
}

方法二

var $thead = $('<thead></thead>');
foo(columns);

function foo(arr, parent) {
    var $tr = $('<tr></tr>');
    for (var i = 0; i < arr.length; i++) {
        var $th = $('<th>' + arr[i].codeName + '</th>');
        len = arr[i].children ? arr[i].children.length: 0;
        arr[i].rank = parent ? parent.rank + 1 : 0;
        $tr.data('rank', arr[i].rank);
        if (len > 0) { //children 存在
            $th.attr('rowspan', 1);
            foo(arr[i].children, arr[i]);
        } else { //children 不存在
            arr[i].colspan = 1;
        }
        if (parent) { //parent 的 colspan 为 children 的 colspan 总和
            parent.colspan = parent.colspan ? parent.colspan: 0;
            parent.colspan += arr[i].colspan;
        }
        $th.attr('colspan', arr[i].colspan);
        $tr.append($th);
    }
    var rank = $tr.data('rank');
    if ($thead.find('tr').length > 0) {
        var flag = true;
        $thead.find('tr').each(function() { //插入 tr 并且排好顺序
            if ($(this).data('rank') > rank) {
                $(this).before($tr);
                flag = false;
                return false;
            } else if ($(this).data('rank') == rank) {
                $(this).append($tr.find('th')) flag = false;
                return false;
            }
        }) if (flag) {
            $thead.append($tr)
        }
    } else {
        $thead.append($tr)
    }

    if (rank == 0) { //最后一次递归结束
        var maxRank = $thead.children('tr:last').data('rank'); //求最大 rank
        $thead.find('th').each(function() { //设置 rowspan 
            if (!$(this).attr('rowspan')) {
                var rowspan = maxRank - $(this).parent('tr').data('rank') + 1;
                console.log(maxRank) $(this).attr('rowspan', rowspan);
            }
        }) $('#myTable table').append($thead);
    }
}

最终实现效果：

注意：从执行效率上来看，方式一比方式二的高。

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/