直接上代码
<%@ page contentType="text/html; charset=utf-8" language="java"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
<title>Ticket Report</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="nocache" content="no-cache">
<script language="JavaScript" type="text/javascript" src="../inc/calendar.js"></script>
<script language="JavaScript" type="text/javascript" src="../inc/server.js"></script>
<script language="JavaScript" type="text/javascript" src="../inc/CommonFunction.js"></script>
<script type="text/javascript" src="../inc/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../inc/My97DatePicker/WdatePicker.js"></script>
<link rel="stylesheet" href="../inc/tickets.css" type="text/css"/>
<script type="text/javascript">
function servicequality(currentpage){
var createDateFlag = checkCreateDate();
if (createDateFlag == false){
return false;
}
if (checkAllValue() == false){
alert('Pls. Input Search Time Value!');
return false;
}
$('#data_body').html('');
$('#data_body').html('<tr id="p"><td colspan="10" id="photo" align="center"></br></br><img src="../inc/My97DatePicker/loading.gif"/></td></tr>');;
var url = '<%=basePath%>serviceQuality.ticket?query=getReport';
var data = {"customerId":$('#customerId').val(),"customerLevel" : $('#customerLevel').val(),"customerType" : $('#customerType').val(),"ticketType" : $('#ticketType').val(),"contractLocation" : $('#contractLocation').val(),"startTime" : $('#startTime').val(),"endTime" : $('#endTime').val(),"isIncludeZero" : $('#isIncludeZero').val()};
$.post(url,data,function(data){
var data = eval('(' + data + ')');
var dataCount=data.length;
var pagesize =30;//每页显示数
var pageNum;//分页总数
//var showPageNum = 6;//显示多少个页码
//计算分页总数
if (dataCount % pagesize == 0) {
pageNum = parseInt(dataCount / pagesize);
} else {
pageNum = parseInt(dataCount / pagesize) + 1;
}
for (var i = 0 ; i < dataCount ; i++ ) {
$('#data_body').append('<tr><td>'+ (i+1) +'</td><td>'+data[i].customerId+'</td><td>'+ data[i].companyName +'</td>' +
'<td>'+ data[i].customerLevel+'</td><td>'+ data[i].customerType+'</td><td>'+ data[i].contractLocation +'</td>'
+'<td>'+ data[i].noOfTicket+'</td><td>'+ data[i].noOfServiceID+'</td><td>'+ data[i].noOfTicketDivideNoOfSericeID+'</td></tr>');
}
var itable = document.getElementById("data_body");
var num = itable.rows.length;//表格所有行数(所有记录数)
for(var i=1;i<(num+1);i++){
var irow = itable.rows[i-1];
if(i>=1 && i<=31){
irow.style.display = "block";
}else{
irow.style.display = "none";
}
}
if(pageNum>1){
$('#data_page').html('');
$('#data_page').append('<tr align="center" width="800"><td rowspan="8" colspan="8"><a href="#" οnclick="servicequalitypage(1)"> 首页 </a> '+
' <a style="color: #E3E3E3"> 上一页 </a> '+' 第 1 页 共'+pageNum+'页'+
' <a href="#" οnclick="servicequalitypage(2)"> 下一页 </a> '+
' <a href="#" οnclick="servicequalitypage('+pageNum+')"> 尾页 </a></td>'+'</tr>');
}
$('#photo').html('');;
$('#p').remove();
});
}
function servicequalitypage(pno){
var itable = document.getElementById("data_body");
var num = itable.rows.length;//表格所有行数(所有记录数)
var pagesum;
if (num % 30 == 0) {
pagesum = parseInt(num / 30);
} else {
pagesum = parseInt(num / 30) + 1;
}
//本页起始用户序号
var beginIndex = (pno - 1) * 30+1;
//本页末尾用户序号的下一个
var endIndex = beginIndex + 30;
//
if (endIndex > num){
endIndex = num;
}
for(var i=1;i<(num+1);i++){
var irow = itable.rows[i-1];
if(i>=beginIndex && i<endIndex){
irow.style.display = "block";
}else{
irow.style.display = "none";
}
}
//控制是否显示
var isshowlast;
var isshownext;
if(pno > 1) {
isshowlast='href="#" οnclick="servicequalitypage('+(pno - 1)+')"';
}
if (pno < pagesum) {
isshownext='href="#" οnclick="servicequalitypage('+(pno + 1)+')"';
}
if(pno == 1){
isshowlast='style="color: #E3E3E3"';
}
if(pno == pagesum){
isshownext='style="color: #E3E3E3"';
}
$('#data_page').html('');
$('#data_page').append('<tr align="center" width="800"><td rowspan="8" colspan="8"><a href="#" οnclick="servicequalitypage(1)"> 首页 </a> '+
' <a '+isshowlast+'> 上一页 </a> '+' 第'+pno+'页 共'+pagesum+'页'+
' <a '+isshownext+'> 下一页 </a> '+
' <a href="#" οnclick="servicequalitypage('+pagesum+')"> 尾页 </a></td>'+'</tr>');
}
function checkAllValue(){
var startTime = $('#startTime').val();
var endTime = $('#endTime').val();
if (startTime =="" || endTime == ""){
return false;
}
}
var eastLocationArray = ["TY","NJ","QD","L2","F2","R2","SH","D2","SU"];
var northLocationArray = ["D1","R1","BJ","I1","L1"];
var southLocationArray = ["D7","L7","F7","R7","DG","L3","GZ","D3","R3","L4","SZ","D4","R4"];
var twLocationArray = ["TD","TW","L6","R6","TA","D6"];
var hkLocationArray = ["HK","D8","D5","L8","L5","R5"];
function changeContractLocation(obj){
var objValue = obj.value;
var objIsChecked = obj.checked;
var selectElt = document.getElementsByName("contractLocation")[0];
if(1 == objValue){
getSelectValues(selectElt, eastLocationArray, objIsChecked);
}
if(2 == objValue){
getSelectValues(selectElt, northLocationArray, objIsChecked);
}
if(3 == objValue){
getSelectValues(selectElt, southLocationArray, objIsChecked);
}
if(4 == objValue){
getSelectValues(selectElt, twLocationArray, objIsChecked);
}
if(5 == objValue){
getSelectValues(selectElt, hkLocationArray, objIsChecked);
}
}
function getSelectValues(selectElt, targetValues, objIsChecked) {
var result = [];
var options = selectElt && selectElt.options;
var opt;
for (var i=0, iLen=options.length; i<iLen; i++) {
opt = options[i];
for(var j=0; j<targetValues.length; j++){
if(opt.value == targetValues[j]){
if(objIsChecked){
opt.selected = true;
}else{
opt.selected = false;
}
}
}
}
}
$(function(){
selectAllTicketType();
selectAllContractLocation();
});
function selectAllTicketType(){
var url = '<%=basePath%>groupDetails.ticket?query=selectAllTicketType';
var data = {};
$.post(url,data,function(data){
var data = eval('(' + data + ')');
for (var i = 0 ; i < data.length ; i ++) {
$('#ticketType').append('<option>'+ data[i][0] +'</option>');
}
});
}
function selectAllContractLocation(){
var url = '<%=basePath%>serviceQuality.ticket?query=selectAllContractLocation';
var data = {};
$.post(url,data,function(data){
var data = eval('(' + data + ')');
for (var i = 0 ; i < data.length ; i ++) {
$('#contractLocation').append('<option value=\"'+ data[i][0] +'\">'+ data[i][0] +'</option>');
}
});
}
function checkCreateDate(){
var d1 =document.getElementById('startTime').value;
var d2 =document.getElementById('endTime').value;
if(!compareDate(d1,d2)){
alert('CreateDate的第二个日期比第一日期小');
return false;
}
}
function compareDate(d1,d2){
var arrayD1 = d1.split("-");
var date1 = new Date(arrayD1[0],arrayD1[1],arrayD1[2]);
var arrayD2 =d2.split("-");
var date2 = new Date(arrayD2[0],arrayD2[1],arrayD2[2]);
if(date1 > date2) return false;
return true;
}
function output(){
//alert("start ... ");
//拷贝
var elTable = document.getElementById("data_table");
var oRangeRef = document.body.createTextRange();
oRangeRef.moveToElementText( elTable );
oRangeRef.execCommand( "Copy" );
//粘贴
try{
var appExcel = new ActiveXObject( "Excel.Application" );
appExcel.Visible = true;
appExcel.Workbooks.Add().Worksheets.Item(1).Paste();
//appExcel = null;
}catch(e){
alert("使用此功能必须在浏览器中设置:Internet选项->安全->将本站加入'受信任的站点'");
}
}
function includeZero(includeobj){
var includeobjValue = includeobj.value;
var includeobjIsChecked = includeobj.checked;
if(includeobjIsChecked){
document.getElementById("isIncludeZero").value="1";
}else{
document.getElementById("isIncludeZero").value="0";
}
}
</script>
</head>
<body>
<form name="reportForm" method="post" action="">
</br></br>
<fieldset style="width: 800px;margin:0 auto;margin-left: 400px; ">
<legend><font style="font-weight: bolder;font-size: 14px;">Search Condition</font></legend>
<br>
<table width="800" border="0" cellpadding="1" cellspacing="1">
<tr>
<td width="25%" align="right" >Customer ID: </td>
<td width="25%"><input type="text" id="customerId"/> </td>
<td width="25%" align="right" nowrap>Customer Level: </td>
<td width="25%"><select name="customerLevel" id="customerLevel" style="width: 180px;">
<option value="All">All</option>
<option value="1">VIP</option>
<option value="2">Svip</option>
<option value="3">trial</option>
<option value="0">Normal</option>
</select>
</td>
</tr>
<tr>
<td width="25%" align="right" >
Customer Type : </td>
<td width="25%"><select id="customerType" style="width: 150px;">
<option value="All">All</option>
<option value="1">IB</option>
<option value="2">Call Center</option>
<option value="0">Normal</option>
</select></td>
<td width="25%" align="right">
Ticket Type : </td>
<td width="25%"><select id="ticketType" style="width: 150px;">
<option>All</option>
</select>
</td>
</tr>
<tr>
<td align="right" width="30%" nowrap>Contract Location:</td>
<td align="left" width="70%" nowrap>
<input type="checkbox" name="eastRegion" onclick="changeContractLocation(this);" value="1"/>华东
<input type="checkbox" name="northRegion" onclick="changeContractLocation(this);" value="2"/>华北
<input type="checkbox" name="southRegion" onclick="changeContractLocation(this);" value="3"/>华南
<input type="checkbox" name="twRegion" onclick="changeContractLocation(this);" value="4"/>台湾
<input type="checkbox" name="hkRegion" onclick="changeContractLocation(this);" value="5"/>香港
<br/>
<select name="contractLocation" id="contractLocation" style="width: 150px;" size="3" multiple="true">
</select>
</td>
</tr>
<tr>
<td align="right" width="25%">Create at : From : </td>
<td width="25%"><input type="text" name="startTime" id="startTime" class="txt-100-22 Wdate" onClick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd',alwaysUseStartDate:true,isShowClear:false})" />
</td>
<td width="25%"> TO : </td>
<td width="25%"> <input type="text" name="endTime" id="endTime" class="txt-100-22 Wdate" onClick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd',alwaysUseStartDate:true,isShowClear:false})" >
</td>
</tr>
<tr>
<td align="right" width="50%" >Is Include 0:</td>
<td>
<input type="checkbox" onclick="includeZero(this);"/>
<input type="hidden" name="isIncludeZero" id="isIncludeZero" value="0"/>
</td>
</tr>
<tr>
<td colspan="10" rowspan="10" align="center">
<input type="button" value="Generate" class="button8" onClick="servicequality(1);" >
<input type="button" name="generate2" value="Exp Data" class="button8" onclick="output();">
</td>
</tr>
</table>
</fieldset>
</form>
<div id="data_div">
<table id="data_table" align="center" width="80%" border="0">
<thead bgcolor="#0099FF">
<td width="8%" ><font color="#000000"> INDEX</font></td>
<td><font color="#000000"> CID</font></td>
<td width="12%"><font color="#000000"> Company Name</font></td>
<td width="12%"><font color="#000000"> Customer Level</font></td>
<td width="12%"><font color="#000000"> Customer Type</font></td>
<td width="12%"><font color="#000000"> Contract Location</font></td>
<td width="12%"><font color="#000000"> No.of Ticket</font></td>
<td width="12%"><font color="#000000"> No.of Service ID</font></td>
<td width="12%"><font color="#000000"> No.of Ticket / No.of Serice ID</font></td>
</thead>
<tbody id="data_body">
</tbody>
</table>
<table id="data_page" align="center">
</table>
</div>
</body>
</html>
