一、需求說明

匯出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：專案組羅大神實現