jQuery生成多层复杂表头方法

最近在做公司系统时用到了表格，而表格的表头是根据一个数组生成，如果只是普通的单层表头很容易实现，但是如果是复杂的表头，就要挺麻烦的，主要是我的数组结构是树形数组，实现需要递归，递归过程需要考虑到<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);
    }
}

最终实现效果：

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

以上关于jQuery生成多层复杂表头方法的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。