Jeesite 导出功能(多个Table 合并导出)

jeesite 框架开发时,要做一个导出的功能,不涉及后台,仅导出当前页面数据

因页面的表头<th>与数据<td>分别在两个table里,所以自己用js做了一些处理

思路如下:创建一个空的table→点击导出时将所需数据放入table调用方法导出→最后清空table

引用了 tableExport.js 以及  jquery.base64.js (其余就不复述,都是jeesite自带的)

上图所示,蓝色标记的table为表头(就是那个上报状态,操作等th),红色框内的table是具体数据,ok,我们开始写导出.

首先,创建一个空的table(id).

<table id="datab" ></table>

下面是js代码

//导出方法  
$('#getTabToExcel').click(function(){//导出按钮绑定点击事件
	/*var n=0;
	for(var i=0;i<$(".ui-jqgrid-htable").find('th').length;i++){
		var thsid=$(".ui-jqgrid-htable").find('th')[i].id;	
		if(thsid.indexOf('actions')!=-1){
			n=i;
		}
	}*/
    //上面注释的代码是为了将"操作"那一列给屏蔽掉,不会导出到excel表格内(第n列)
    //如果你也需要有不必要导出的列,可以适当参考下

    //创建thead对象,将所需的表头(第一个table内的th)取出,复制
	var thead=$(".ui-jqgrid-htable").find("thead").clone();
    //创建tbody对象,将所需的表头(第二个table内的td)取出,复制
	var tbody=$("#dataGrid").find("tbody").clone();
    //添加到我们创建的空table
	$("#datab").append(thead);
	$("#datab").append(tbody);
    //表里有行空tr,是jeesite创建dataGrid时生成的,具体什么用我不知道,我把它删掉了
	$("#datab").find(".jqgfirstrow").remove();
    //导出方法
	$("#datab").tableExport({
		type:'excel',
		fileName: '山东集团投资数据表',
		escape:'false',
        ignoreColumn: [n],  //导出时忽略某一列数据
	});
    //最后清空table
	$("#datab").html("");
});

最后,附上导出效果图