`

JSP页面统计模板(打印,导出为Excel,查询统计)

    博客分类:
  • JSP
 
阅读更多

每次做统计都要写新的JSP页面,有些调样式,有些要求打印,有些要求导出到Excel里面,有的还要查询,这篇弄个全的,以后要用了直接粘过来。

 

1、页面结构:

<body style="overflow:auto" onload="addSelected('${month}');">
<div id="print">
	<input class="bginput but_1" onclick="printTures();" type="button" value="打印" />  
	<input id="idPrint3" class="but_1" type="button"   value="打印预览" onclick="printpage();" />
	<input id="excelBtn" class="but_1" type="button"   value="导出为Excel" onclick="toExcel();" />
</div>
<div id="queryItem">
月份:
<select id="month">
	<option value="13">全部</option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
	<option value="10">10</option>
	<option value="11">11</option>
	<option value="12">12</option>
</select>
<input type="button" value="查询" onclick="queryOutCome();" />
</div>
<div id="page" style="overflow:auto;">
<h2 id="queryTitle">${year }年<c:if test="${month==13}">全部</c:if><c:if test="${month!=13 }">${month }</c:if>月份数据统计</h2>
<table cellspacing="0" cellpadding="0" border="0" width="95%" align="center" id="queryTable" >
    <tr id="firstTr">
      <td>日期</td>
      <td>序号</td>
      <td>物品名称</td>
      <td>数量</td>
      <td>单价</td>
      <td>费用</td>
      <td>备注</td>
    </tr>
    <!-- 合计 -->
    <c:set var="field4" value="${0 }"></c:set>
    
    <c:forEach items="${t4List }" var="t4" varStatus="order">
    	<tr>
    		<td><fmt:formatDate value="${t4.field3 }" type="date" pattern="M月dd日" ></fmt:formatDate></td><!-- 日期 -->
    		<td>${order.index+1 }</td><!-- 序号 -->
    		<td>${t4.field2}</td><!-- 物品名称 -->
    		<td>${t4.field6}</td><!-- 数量 -->
    		<td>${t4.field7}</td><!-- 单价 -->
    		<td>${t4.field4}</td><!-- 费用 -->
    		<c:set var="field4" value="${field4+t4.field4}"></c:set><!-- 费用合计 -->
    		<td>${t4.field8}</td><!-- 备注 -->
    	</tr>
    </c:forEach>
    
    <tr>
    	<td colspan="5">合计</td>
    	<td><fmt:formatNumber value="${field4 }" pattern="#.##" maxFractionDigits="2" minFractionDigits="2"></fmt:formatNumber></td>
	<td>&nbsp;</td>
    </tr>
</table>
</div>
</body>

 

 2、CSS:

<style type="text/css">
* { padding:0; margin:0; }
body { font-family: "宋体"; color:#333; font-size:12px; line-height:20px; }
table { border-collapse:collapse; border-spacing:0px; border:none; margin-top:15px; }
table td{ border:1px solid #ccc; text-align:center}
#print{ text-align:right;}
.but_1 { width:102px; height:28px; line-height:28px; margin-bottom: 3px; border:0px; background:#006e57; color: #fff; cursor:pointer; font-size:14px; }
table caption{ font-size:16px; margin:3px 0px 20px 0px;}
#queryItem{ border-collapse:collapse; border-spacing:0px; border:none; margin-top:15px; margin-left:55px;}
h2{ text-align:center; font-size:16px;}
.memo{text-align:left;}
</style>

 

3、引入的JS和JSTL库:

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/print_utils2.js"></script>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

 4、各个小功能实现:

 

4.1 查询:

//点击查询按钮时触发该事件:根据月份查询每月的数据
function queryOutCome(){
var month = document.getElementById("month").value;//月份
	var src="inOrOut!queryOutCome.action?month="+month+"&time="+new Date().getTime();
	window.location=src;
}

//页面加载完成时触发该方法:根据返回来的月份填充select中的值
function addSelected(month){
    jsSelectItemByValue(document.getElementById("month"),month); 
}

//填充选中值
function jsSelectItemByValue(objSelect,objItemText){  
    for(var i=0;i<objSelect.options.length;i++) {  
        if(objSelect.options[i].value == objItemText) {  
            objSelect.options[i].selected = true;  
            break;  
        }  
    }  
}

  4.2 打印和打印预览:

/**断行换页**/
function fenye(){
	var trH = $("#queryTable tr:eq(2)").height();
	var count = Math.floor(500/trH)+1;
	if(trH>21){count= count+3;}
	//alert(trH+"\n"+count);
	$("#queryTable tr").each(function(i){
		if(i>0)
		if(i%count==0){
		$(this).attr("style","page-break-before:always");}
	});
}

function printpage(){
	//使用的smsx.cab查件进行的打印,所以需要添加这个object
	$("body").append('<OBJECT id="factory" codeBase="redist/smsx.cab#Version=6,3,434,26" height="0" width="0" classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" viewastext></OBJECT>');
	var printdiv = document.getElementById("page");
	printdiv.style.overflow="";
//	fenye();
	previews();
	printdiv.style.overflow="auto";
	$("#factory").remove();
}

/**打印*/
function printTures() {
	$("body").append('<OBJECT id="factory" codeBase="redist/smsx.cab#Version=6,3,434,26" height="0" width="0" classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" viewastext></OBJECT>');
	var printdiv = document.getElementById("page");
	printdiv.style.overflow="";
	printBase();
	document.getElementById("print").style.display = "none";// 隐藏按钮
	if(document.getElementById("queryItem")){//隐藏月份
		document.getElementById("queryItem").style.display = "none";
		var title = document.getElementById("queryTitle").innerText;
		document.getElementById("queryTitle").style.display = "none";//否则第一页会出现两个标题
		title = "&b"+title+"&b";
		factory.printing.header = title ;
		factory.printing.footer = "&b第&p页/共&P页&b";//显示页码
		fenye();
	}
	factory.printing.Print(false);
	document.getElementById("print").style.display = "block";// 显示按钮
	if(document.getElementById("queryItem")){
		document.getElementById("queryItem").style.display = "block";
		document.getElementById("queryTitle").style.display = "block";
	}
	$("#factory").remove();
}
/**预览*/
function previews(){
	printBase();
	document.getElementById("print").style.display = "none";// 隐藏按钮
	if(document.getElementById("queryItem")){//隐藏月份
		document.getElementById("queryItem").style.display = "none";
		var title = document.getElementById("queryTitle").innerText;
		document.getElementById("queryTitle").style.display = "none";//否则第一页会出现两个标题
//		factory.printing.header = "居左显示&b居中显示&b居右显示页码,第&p页/共&P页" ;
		title = "&b"+title+"&b";
		factory.printing.header = title ;
		factory.printing.footer = "&b第&p页/共&P页&b"
		fenye();
	}
	factory.printing.Preview();
	document.getElementById("print").style.display = "block";// 显示按钮
	if(document.getElementById("queryItem")){
		document.getElementById("queryItem").style.display = "block";
		document.getElementById("queryTitle").style.display = "block";
	}
	$("#factory").remove();
}

 4.3导出到Excel中:

/**
 * 点击导出为Excel按钮时将当前表中的数据导出到Excel中
 */
function toExcel(){
	try {
	  	var oXL = new ActiveXObject("Excel.Application");
	 }catch(e) {
		  alert( "要将该表导出到Excel,您必须安装Excel电子表格软件,同时浏览器须使用“ActiveX 控件”,您的浏览器须允许执行控件。");
		  return "";
	 }
	 var oWB = oXL.Workbooks.Add();  //新增工作簿
	 var oSheet = oWB.ActiveSheet;  //创建工作表 
	 var sel=document.body.createTextRange();
	 sel.moveToElementText(document.getElementById("page"));//dataTable为table的id
	 sel.select();
	 sel.execCommand("Copy");
	 oSheet.Paste();
	 //格式处理
	var cellValue = oSheet.Cells(1,1).Value;//获取标题
	var row = document.getElementById("firstTr").childNodes.length;//获取tr的个数用来合并标题
	oSheet.Range(oSheet.Cells(1,1),oSheet.Cells(2,row)).mergecells=true;//合并两行
	oSheet.Cells(1,1).Value=cellValue;//赋值
	oSheet.Cells(1,1).HorizontalAlignment = 3;//水平对齐方式枚举* (1-常规,2-靠左,3-居中,4-靠右,5-填充 6-两端对齐,7-跨列居中,8-分散对齐)  
	oSheet.Cells(1,1).VerticalAlignment = 2;//垂直对齐方式枚举*(1-靠上,2-居中,3-靠下,4-两端对齐,5-分散对齐)  
	
	oXL.Visible = true; //设置excel为可见
	oXL.UserControl = true;  //很重要,不能省略,不然会出问题 意思是excel交由用户控制
	oSheet = null;
	oWB = null;
	oXL = null;
}

 4.4 有时候还需要将阿拉伯数字的钱转换成大写的:

function changeNumMoneyToChinese(money) {
  var cnNums = new Array("零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"); //汉字的数字
  var cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
  var cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
  var cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
  var cnInteger = "整"; //整数金额时后面跟的字符
  var cnIntLast = "元"; //整型完以后的单位
  var maxNum = 999999999999999.9999; //最大处理的数字
  var IntegerNum; //金额整数部分
  var DecimalNum; //金额小数部分
  var ChineseStr = ""; //输出的中文金额字符串
  var parts; //分离金额后用的数组,预定义
  if (money == "") {
  return "";
  }
  money = parseFloat(money);
  if (money >= maxNum) {
  alert('超出最大处理数字');
  return "";
  }
  if (money == 0) {
  ChineseStr = cnNums[0] + cnIntLast + cnInteger;
  return ChineseStr;
  }
  money = money.toString(); //转换为字符串
  if (money.indexOf(".") == -1) {
  IntegerNum = money;
  DecimalNum = '';
  } else {
  parts = money.split(".");
  IntegerNum = parts[0];
  DecimalNum = parts[1].substr(0, 4);
  }
  if (parseInt(IntegerNum, 10) > 0) { //获取整型部分转换
  var zeroCount = 0;
  var IntLen = IntegerNum.length;
  for (var i = 0; i < IntLen; i++) {
  var n = IntegerNum.substr(i, 1);
  var p = IntLen - i - 1;
  var q = p / 4;
  var m = p % 4;
  if (n == "0") {
  zeroCount++;
  } else {
  if (zeroCount > 0) {
  ChineseStr += cnNums[0];
  }
  zeroCount = 0; //归零
  ChineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
  }
  if (m == 0 && zeroCount < 4) {
  ChineseStr += cnIntUnits[q];
  }
  }
  ChineseStr += cnIntLast;
  //整型部分处理完毕
  }
  if (DecimalNum != '') { //小数部分
  var decLen = DecimalNum.length;
  for (var i = 0; i < decLen; i++) {
  var n = DecimalNum.substr(i, 1);
  if (n != '0') {
  ChineseStr += cnNums[Number(n)] + cnDecUnits[i];
  }
  }
  }
  if (ChineseStr == '') {
  ChineseStr += cnNums[0] + cnIntLast + cnInteger;
  } else if (DecimalNum == '') {
  ChineseStr += cnInteger;
  }
  return ChineseStr;
}

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics