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

来源:互联网 发布:word是网络通信软件吗 编辑:程序博客网 时间:2024/06/09 14:04

盘外篇的目的:

问题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 tableif ( exportInfo.messageBottom ) {    addRow( [exportInfo.messageBottom], rowPos );    mergeCells( rowPos, data.header.length-1 );}

add this code:

//if we have mergesif (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(番外篇)

原创粉丝点击