tableExport.js导出execl-增加表头

一、需求说明

导出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关键字

tableExport.js导出execl-增加表头_第1张图片

562行定义变量

tableExport.js导出execl-增加表头_第2张图片

598行table表格增加表头 591行计算表格合并的列数

tableExport.js导出execl-增加表头_第3张图片

源代码如下  562--603行

var titleName  = defaults.fileName; //excel文件第一行标题名称
          var titleTr = ''; //标题tr
          var colspanCount =0; //colspan的数量

          // Header
          docData += '';
          $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 += '';
                }
              });
            
            if(index == 0){
            	titleTr +=''
            	docData +=titleTr;
            }
            if ( trData.length > 0 )
              docData += '' + trData + '';
            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+"]明细");
	})	

测试效果:

tableExport.js导出execl-增加表头_第4张图片

PS:项目组罗大神实现

你可能感兴趣的:(项目问题,tableExprot.js)

'+titleName+'