tableExport.js匯出execl-增加表頭
阿新 • • 發佈:2018-12-15
一、需求說明
匯出execl表格增加表頭,本篇文章是在上一篇《tableExport.js匯出execl-數字格式化方案》的基礎之上進行,tableExport.js匯出execl的方式和使用方法不做贅述,上篇解決問題為資料格式化,本篇是增加execl表頭
二、解決方案
1.tableExport.js匯出execl裡面的原理其實是html匯出execl原理,詳情可以參考http://www.cnblogs.com/myaspnet/archive/2011/05/06/2038490.html
所以只需要在原table表格的基礎之上增加一行表頭即可
2.同樣也是修改原始碼,tableExport.js原始碼中搜索execl關鍵字
562行定義變數
598行table表格增加表頭 591行計算表格合併的列數
原始碼如下 562--603行
var titleName = defaults.fileName; //excel檔案第一行標題名稱 var titleTr = ''; //標題tr var colspanCount =0; //colspan的數量 // Header docData += '<table border="1"><thead>'; $hrows = $table.find('thead').first().find(defaults.theadSelector); $hrows.each(function (index,item) { trData = ""; ForEachVisibleCell(this, 'th,td', rowIndex, $hrows.length, function (cell, row, col) { if ( cell !== null ) { var thstyle = ''; trData += '<th'; for ( var styles in defaults.excelstyles ) { if ( defaults.excelstyles.hasOwnProperty(styles) ) { var thcss = $(cell).css(defaults.excelstyles[styles]); if ( thcss !== '' && thcss != '0px none rgb(0, 0, 0)' && thcss != 'rgba(0, 0, 0, 0)' ) { thstyle += (thstyle === '') ? 'style="' : ';'; thstyle += defaults.excelstyles[styles] + ':' + thcss; } } } if ( thstyle !== '' ) trData += ' ' + thstyle + '"'; if ( $(cell).is("[colspan]") ) trData += ' colspan="' + $(cell).attr('colspan') + '"'; colspanCount += parseInt($(cell).attr('colspan') == null ?1:$(cell).attr('colspan')); if ( $(cell).is("[rowspan]") ) trData += ' rowspan="' + $(cell).attr('rowspan') + '"'; trData += '>' + parseString(cell, row, col) + '</th>'; } }); if(index == 0){ titleTr +='<tr><th style="color:rgb(0, 0, 0);font-size:13px;font-weight:700" colspan="'+colspanCount+'" rowspan="1">'+titleName+'</th></tr>' docData +=titleTr; } if ( trData.length > 0 ) docData += '<tr>' + trData + '</tr>'; rowIndex++; });
頁面端呼叫程式碼
封裝程式碼 tableExport.js
var TableExport = function() { "use strict"; // function to initiate HTML Table Export var runTableExportTools = function(tableName,fileName) { // $(".export-excel").on("click", function(e) { // e.preventDefault(); var exportTable = $(this).data("table"); if(tableName){ exportTable =$('#'+tableName); } var ignoreColumn = $(this).data("ignorecolumn"); exportTable.tableExport({ type : 'excel', escape : 'false', fileName: fileName, worksheetName: fileName, excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],//['background-color', 'color', 'font-size', 'font-weight'], ignoreColumn : '[' + ignoreColumn + ']' }); // }); }; return { // main function to initiate template pages init : function(tableName,fileName) { runTableExportTools(tableName,fileName); } }; }(jQuery);
按鈕呼叫事件
$("#btn_export").click(function(e) {
var evalName = $("#evalNameDropDown option:selected").text();
if(evalName){evalName=evalName.substring(0, 5)}
var leadergroupName = $("#leadergroupIdDropDown option:selected").text();
var leaderName = $("#leaderNameDropDown option:selected").text();
TableExport.init("dataInfoTable",evalName+leadergroupName+"xx人員["+leaderName+"]明細");
})
測試效果:
PS:專案組羅大神實現