盘外篇的目的:
问题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(番外篇)