tableExport.js导出execl-增加表头

项目问题 专栏收录该内容
34 篇文章 0 订阅

一、需求说明

导出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:项目组罗大神实现

  • 4
    点赞
  • 48
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值