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(番外篇)
阅读全文
0 0
- DataTables: Export multiple row headers(导出多行表头)---番外篇
- DataTables: Export multiple row headers(导出多行表头)
- easyui多行复杂表头数据导出
- 多表头导出Excel
- SQL Server带列名导出到Excel(Export to CSV with headers)的几个思路
- datatables 使用 $().dataTable().row()获取行失败的问题
- C# WinForm DataTable 导出 Excel 多行表头、合并单元格
- C#导出Excel——多表头、表头跨行跨列合并
- poi导出Excel报表多表头双层表头、合并单元格
- datatables 导出excel
- dataTables导出Excel
- datatables 导出为excel
- delphi dbgrideh导出到Excel 多表头
- Datatables之表头和表尾
- Jquery Datatables表头不对齐解决办法
- Datatables动态表头,动态列渲染,可用
- list 多行表头 表头合并
- 导出表 export table
- QT在调试过程出现no such a file
- w3chool 离线手册 2017-8-23 CHM制作工具软件与教程
- tf.argmax()中的axis参数
- jsp页面一些获取值的方式
- 优化篇 04. 扩大虚拟内存 ❀ Windows Server 2016
- DataTables: Export multiple row headers(导出多行表头)---番外篇
- 【JQuery】JQuery+JS实现点击左边, 右边出现相应的页面
- 【BFS && 树】UVALive
- 表单序列化 不根据name value 根据自定义key value完成
- 基于 Viewpager,实现了 Gallery 效果
- 关于列表
- 支持向量机
- 子元素浮动,父元素撑不开height=0解决方法
- Android截屏分享