DataTables: Export multiple row headers(导出多行表头)---番外篇

盘外篇的目的:

问题1:在使用DataTables export的过程中,遇到了多行表头的无法导出问题

该问题已解决,见个人博客:DataTables: Export multiple row headers(导出多行表头)

问题升级2:export速度太慢,简直无法直视

查阅DataTables的问答库发现了解决办法:Datatable excel export taking too long time
这个告诉了解决办法,只要引用库版本升级就可以了。
之前的版本是:DataTables 1.10.12, Buttons 1.2.4
更新的版本是:DataTables 1.10.15, Buttons 1.4.0

问题升级3:export速度问题立马解决了,但是出现了新的问题,colspan和rowspan出现了问题。修改之后,才可以继续使用。

分析原因:最新版本中默认导出的表中第一行是title,并且默认含有mergecells标签

实现的导出表格效果,如下:

备注:从该表可知, 我并没有实现行合并,只实现了第二行的列合并,主要是我的需求做到这样就可以了。另外大家需要注意的是,延承下来的代码中,最后的Total有bug,因为第三行的Total会跟后面的单元格合并,而第二行最后一个Total可以跟下面的空格合并,所以根据个人需求,我删除了行合并的功能

表格

1.实现多行效果,这个没有问题,见DataTables
2.实现合并效果,主要是这个有问题

update the “buttons.html5.js” file
DataTable.ext.buttons.excelHtml5中 action function
a. Back in the DataTable.ext.buttons.excelHtml5 section
b. replace

if ( exportInfo.title ) {
            addRow( [exportInfo.title], rowPos );
            mergeCells( rowPos, data.header.length-1 );
}

with this code:

if ( exportInfo.title ) {
            addRow( [exportInfo.title], rowPos );
            // change by shf 2017/8/23
            // mergeCells( rowPos, data.header.length-1 );
            mergeCells( rowPos, data.header[0].length-1 );
}

c. after the code

if ( exportInfo.messageTop ) {
    addRow( [exportInfo.messageTop], rowPos );
    mergeCells( rowPos, data.header.length-1 );
}

add the code:

var colLetter = function (colNum) {
    for (var p1 = colNum, q1 = ""; p1 >= 0;) {
        var temp = parseInt(p1 / 26);
        var temp01 = "";
        if (temp) {
            temp01 = String.fromCharCode(temp + 64);
        }
        q1 = temp01 + String.fromCharCode(p1 % 26 + 65) + q1;
        p1 = Math.floor(button /
                26) - 1
    }
    return q1;
};
var mgCnt = 0;
var merges = [];

d. update the code

if (config.header) {
    // modify by shf 2017/8/9
    /* ------- */
    //for each header row
    for (i = 0; i < data.header.length - 1; i++) {
        //for each column (cell) in the row
        for (var j = 0; j < data.header[i].length; j++) {
            //look for a non-colspan/rowspan cell
            if (data.header[i][j] != "" && data.header[i][j] != "") {
                var startRow = i;
                var startCol = j;
                var endRow = i;
                var endCol = j;

                //console.log(i+":"+j+"="+b.header[i][j]);

                //lookahead
                if (j + 1 < data.header[i].length)
                    if (data.header[i][j + 1] == "") //is the cell to the right a colspan?
                    {
                        //console.log("cspan start:"+b.header[i][j]);
                        startCol = j;
                        endCol = j + 1;

                        //get to the last column in the colspan
                        while (endCol < data.header[i].length && data.header[i][endCol] == "") {
                            //b.header[i][endCol] = ""; //Use if cspan is a special char/sequence
                            endCol++;
                        }
                        endCol--;
                    }

                if (i + 1 < data.header.length - 1)
                    if (data.header[i + 1][j] == "") //is the cell below a rowspan?
                    {
                        //console.log("rspan start:"+b.header[i][j]);
                        startRow = i;
                        endRow = i + 1;

                        //get to the last row in the rowspan
                        while (endRow < data.header.length && data.header[endRow][j] == "") {
                            //b.header[endRow][j] = ""; //Use if rowspan is a special char/sequence
                            endRow++;
                        }
                    }

                //create and store merge ranges
                //if endCol or endRow show movement
                if (startRow != endRow || startCol != endCol) {
                    var sC = colLetter(startCol); //convert startCol to excel column letter
                    var sR = startRow + 2;
                    var eC = colLetter(endCol); //conver endCol to excel column letter
                    var eR = endRow + 1;

                    //console.log("sC="+sC);
                    merges[mgCnt] = sC + "" + sR; //start of range

                    //console.log("endrow > startrow="+endRow+">"+startRow);
                    //console.log("endCol > startcol="+endCol+">"+startCol);

                    if (endCol > startCol) //end column
                        merges[mgCnt] = merges[mgCnt] + ":" + eC;
                    else
                        merges[mgCnt] = merges[mgCnt] + ":" + sC;

                    if (endRow > startRow) //end row
                        merges[mgCnt] = merges[mgCnt] + eR;
                    else
                        merges[mgCnt] = merges[mgCnt] + sR;

                    //console.log("merges[mgCnt]="+merges[mgCnt]);

                    mgCnt++; //increment number of merge ranges
                }
            }
        }
    }
    //add multiple headers
    for (var i = 0; i < data.header.length; i++) {
        addRow(data.header[i], rowPos);
        $('row:last c', rels).attr('s', '2'); // bold
    }
}

e. after this code:

// Below the table
if ( exportInfo.messageBottom ) {
    addRow( [exportInfo.messageBottom], rowPos );
    mergeCells( rowPos, data.header.length-1 );
}

add this code:

//if we have merges
if (mgCnt > 0) {
    //create a mergeCells section
    var z = $('mergeCells', rels);
    z.attr( 'count', z.attr( 'count' )+1 + mgCnt );
    //var z = _createNode(rels, "mergeCells", {
    //    attr: {
    //        count: mgCnt
    //    }
    //});

    //add each merge range as a child
    for (var i = 0; i < mgCnt; i++) {
        n = _createNode(rels, "mergeCell", {
            attr: {
                ref: merges[i]
            }
        });
        z.append(n);
    }
    if (z.children.length > 0)
        $("worksheet", rels).append(z);//add to the worksheet
}

修改后的文件见Github
colspan or rowspan header(番外篇)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值