首先定义前端页面的书写格式,如图:
定义完了页面其次需要js函数,如下代码:
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/include.inc.jsp"%>
<!-- 导出Excel选择面板开始 -->
<div class="pageContent" id="exportControlDiv" style="display:none;background-color:#fff;border:1px solid #5195B7;position:absolute;left:0px;top:0px;width:250px;height:200px;">
<div class="panelBar">
<div onclick='$("#exportControlDiv",navTab.getCurrentPanel()).hide();' style="float:right;padding-top:2px;padding-right:5px;cursor:pointer;">
<img src="${base}/common/images/no.jpg" />
</div>
<div>
<input type="button" name="全选" value="全选" onclick="fieldAllSel(1);" />
<input type="button" name="反选" value="反选" onclick="fieldAllSel(0);"/>
</div>
</div>
<div style="height: 145px; overflow: auto;">
<ul id="fieldsUl">
<li><input type="checkbox" checked class="filedsLi" />测试</li>
</ul>
</div>
<div class="panelBar">
<input type="button" name="导出" value="点击导出Excel" onclick="exportExcel();"/>
</div>
</div>
<!-- 导出Excel选择面板结束 -->
<script>
//启动时给表单添加隐藏域
$(document).ready(function(){
var doneDeskTop = "${__is_desktop_}";
var eForm = null;
if(doneDeskTop == "true"){
eForm=$("form.excel");
}else{
eForm=$(navTab.getCurrentPanel()).find("form.excel");
}
if(eForm.length>0){//如果找到了,则递交
var excelFileName="";
var fileDateStr=new Date().formatDate('yyyy-MM-dd');
if($(eForm[0]).attr("excelFileName")==undefined || $(eForm[0]).attr("excelFileName")=='')
{
console.log(eForm[0]);
alert('请您配置Form的excelFileName(导入文件名)属性');
excelFileName="excel数据导出"+"("+fileDateStr+")";
}else{
console.log(eForm[0]);
excelFileName=$(eForm[0]).attr("excelFileName")+"("+fileDateStr+")";
}
//alert(excelFileName);
//创建隐藏的div
divHtml='<!-- 专为Excel下载添加的隐藏域 -->'+
'<div>'+
'<input type="hidden" id="createExcelFlag" name="createExcelFlag" value="${createExcelFlag}" /> <!-- 是否创建Excel标识,默认为0 -->'+
'<input type="hidden" id="fvals" name="fvals" value="" /><!-- 对象属性名称-->'+
'<input type="hidden" id="fnames" name="fnames" value="" /> <!-- EXCEL的中文列名 -->'+
'<input type="hidden" id="excelFileName" name="excelFileName" value="'+
excelFileName+'"/> <!-- EXCEL的文件名,可由界面的form的设定动态改变-->'+
'</div>';
$(eForm[0]).append(divHtml);
console.log(eForm)
}
});
//表单递交
function exportExcel(){
//1.设置一下隐藏域的值
$("#createExcelFlag",navTab.getCurrentPanel()).val("1");
//document.excelForm.submit();
var eForm=$(navTab.getCurrentPanel()).find("form.excel");
if(eForm.length>0){//如果找到了,则递交
eForm[0].submit();
}
$("#exportControlDiv",navTab.getCurrentPanel()).hide();
}
//全选反选
function fieldAllSel(flag){
if(flag==1){
$(".filedsLi",navTab.getCurrentPanel()).attr("checked",true);
getAllSelVal();
}else{
$(".filedsLi",navTab.getCurrentPanel()).attr("checked",false);
getAllSelVal();
}
}
//遍历取值
function getAllSelVal(){
$("#fvals",navTab.getCurrentPanel()).val("");
$("#fnames",navTab.getCurrentPanel()).val("");
$(".filedsLi",navTab.getCurrentPanel()).each(function(){
if($(this).attr("checked")){
//给隐藏域赋值
$("#fvals",navTab.getCurrentPanel()).val($("#fvals",navTab.getCurrentPanel()).val()+$(this).val()+"|");
$("#fnames",navTab.getCurrentPanel()).val($("#fnames",navTab.getCurrentPanel()).val()+$(this).attr("fname")+"|");
}
});
}
//checkBox选择
function fieldSel(obj){
getAllSelVal();
}
function createExcel(){
//1.弹出的DIV定位
var X = ($(window).width()/2-200)-$("#exportControlDiv",navTab.getCurrentPanel()).width()/2;
var Y =($(window).height()-200)/2-$("#exportControlDiv",navTab.getCurrentPanel()).height()/2;
$("#exportControlDiv",navTab.getCurrentPanel()).css("left",X+"px");
$("#exportControlDiv",navTab.getCurrentPanel()).css("top",Y+"px");
//2.填充字段选择
//2.1读取所有的字段信息
$("#fieldsUl",navTab.getCurrentPanel()).empty();
$(".exportField",navTab.getCurrentPanel()).each(function(){
var liInfo='<li><input onclick="fieldSel(this);" fname="'+$(this).text()+'" type="checkbox" value="'+
$(this).attr("exportFiledName")+'" checked class="filedsLi" />'+
$(this).text()+'</li>';
//加入列表框
$("#fieldsUl",navTab.getCurrentPanel()).append(liInfo);
//给隐藏域赋值
$("#fvals",navTab.getCurrentPanel()).val($("#fvals",navTab.getCurrentPanel()).val()+$(this).attr("exportFiledName")+"|");
$("#fnames",navTab.getCurrentPanel()).val($("#fnames",navTab.getCurrentPanel()).val()+$(this).text()+"|");
});
$("#exportControlDiv",navTab.getCurrentPanel()).show();
}
</script>
前端页面定义form路径,以便提交操作!
<form method="post" name="excelForm" excelFileName="这个是表头,也可以在后台定义" rel="pagerForms" class="excel" action="自己的路径" onsubmit="return navTabSearch(this)">
--------------------------前后端分界线--------------------------
控制层:
首先查询后台获取数据,List<>
//前端设置参数,0为读取数据,1为导出
if(createExcelFlag==null || !createExcelFlag.equals("1")){
request.setAttribute("createExcelFlag", "0");//注意一定要设置一下
request.setAttribute("list", list);
request.setAttribute("applyOrganCode",overTimeApplication.getApplyOrganCode());
request.setAttribute("dept",selectorService.findDeptsByTableName("t_code_department"));
String user= SecurityUtils.getCurrentUserName();
return "/dwz/management/overTime/view";
}else{
System.out.println("-----开始创建Excel---");
//得到要生成的列的字段
String fvals=request.getParameter("fvals");
String fnames=request.getParameter("fnames");
/*/
/***********以下为生成EXCEL的处理******************************/
/**
* 2.生成Excel
*/
OverTimeApplication overTime = new OverTimeApplication();
overTime.setProject("合计:");
overTime.setMoney(money);
list.add(overTime);//给最后一行自定义
//这个前台会传,但是这里后台定义了新的名称
String fileName= request.getParameter("excelFileName");//这个由前台传,这里先暂设一个
String[] headers= StringUtil.split(fnames.substring(0,fnames.length()-1), '|');//去掉最后的 |再切
String[] outFields=StringUtil.split(fvals.substring(0,fvals.length()-1), '|');
ExportExcel e=new ExportExcel<OverTimeApplication>();
response.reset();
response.addHeader("Content-Disposition", "attachment;filename="
+ new String((fileName+".xlsx").getBytes("utf-8"), "ISO8859-1"));
response.setContentType("application/vnd.ms-excel;charset=utf-8");
e.exportExcel(fileName,headers,outFields,list,response.getOutputStream(),"yyyy-MM-dd");
response.flushBuffer();
/*/
/***********生成EXCEL的处理完毕******************************/
return null;
}