html範例 -- 易寶流量查詢 -- 日曆控件 -- 表格 -- 分頁 -- 查詢 -- 導出

<%@ page contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>流量訂單列表</title>
<script type="text/javascript">
var contextPath = '${pageContext.request.contextPath}';
var rid = '${param.rid}';
var username = '${param.username}';
var rid = '${sessionScope.suser.rid}';
var username = '${sessionScope.suser.username}';
</script>javascript

【導入依賴庫】
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/statics/bootstrap-3.3.5-dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/statics/jquery/css/buttons.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/statics/jquery/css/editor.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/statics/css/main.css">
<link href="${pageContext.request.contextPath }/statics/jquery-easyui-1.4.4/themes/bootstrap/easyui.css" type="text/css" rel="stylesheet" />
<link href="${pageContext.request.contextPath }/statics/jquery-easyui-1.4.4/themes/bootstrap/icon.css" type="text/css" rel="stylesheet" />
<link href="${pageContext.request.contextPath }/statics/jquery-easyui-1.4.4/themes/bootstrap/color.css" type="text/css" rel="stylesheet" />css

【導入依賴庫】java

【啓動入口】
$(document).ready(function(event) {

var orderDataGrid = $("#orderDataGrid").datagrid({//【表單】
width : "auto",
height : "auto",
idField : "memberid",
url : "${pageContext.request.contextPath}/opfloworder/getFlowOrderList",
columns : [[
{field : "orderid", title : "訂單編號", width:fixWidth(0.13)},
{field : "mobile", title : "手機號碼", width:fixWidth(0.1)},
{field : "flownumber", title : "充值流量", width:fixWidth(0.05), formatter:flownumberFormatter},
{field : "status", title : "充值狀態", width:fixWidth(0.13), formatter:flowOrderStatusFormatter},
{field : "createtime", title : "建立時間", width:fixWidth(0.1), formatter : createTimeFormatter},
{field : "memberid", title : "用戶id", width:fixWidth(0.13)},
{field : "prodvalue", title : "金額", width:fixWidth(0.1), formatter:priceFormatter},
{field : "prodname", title : "商品名稱", width:fixWidth(0.1)},
{field : "thirdpartyorderid", title : "第三方訂單號", width:fixWidth(0.13)},

{
field : "operation", title : "操做", width:fixWidth(0.15), formatter : operationFormatter
}
]],
fitColumns : true,
rownumbers : true,
pagination : true,
pageSize : 10,
pageList : [10, 20],
striped : true,
onBeforeLoad : function(param) {//【ajax參數】
param.pageindex = param.page;
param.pagesize = param.rows;

var orderid = $("input[name='orderid']").val();
if(orderid != "" && typeof(orderid) != "undefined" && orderid != null) {
param.orderid = orderid;
}

var mobile = $("input[name='mobile']").val();
if(mobile != "" && typeof(mobile) != "undefined" && mobile != null) {
param.mobile = mobile;
}

var prodname = $("input[name='prodname']").val();
if(prodname != "" && typeof(prodname) != "undefined" && prodname != null) {
param.prodname = prodname;
}

var status = $("select[name='status'] option:selected").val();
if(status) {
param.status = status;
}

var startTime = $("input[name='startTime']").val();
if(startTime != "" && typeof(startTime) != "undefined" && startTime != null) {
param.startTime = startTime;
}

var endTime = $("input[name='endTime']").val();
if(endTime != "" && typeof(endTime) != "undefined" && endTime != null) {
param.endTime = endTime;
}

delete param.page;
delete param.rows;

return true;
},//
onClickRow: onClickRowFunction,
onLoadError : onLoadErrorFunctionweb

});//datagrid

orderDataGrid.datagrid('getPager').pagination({
layout:['list','sep','first','prev','sep','links','sep','next','last','sep','refresh']
});

$("#orderQueryButton").click(function(){
orderDataGrid.datagrid("reload");
});

$("#orderExportButton").on("click",function(){
//獲取數據
var param = {};
param.orderid=$("input[name='orderid']").val();
param.startTime=$("input[name='startTime']").val();
param.endTime=$("input[name='endTime']").val();
//param.mobile=$("input[name='mobile']").val();
//param.prodname=$("input[name='prodname']").val();
//var status = $("select[name='status'] option:selected").val();
//if(status) {
// param.status = status;
//}
//【導出至excel】
$.ajax({
url: contextPath + "/opfloworder/exportFlowOrder",
type: "POST",
data:param,
success: function(data) {
window.open(data.filePath,"_blank");
}
});

});
});//ready

function flownumberFormatter(value, row, index) {
var content = "";
if(typeof(value) == "undefined") {
content = "數據異常, 此字段無值";
} else {
content = value+"M ";
}

return content;
}
function priceFormatter(value, row, index) {
var content = "";
if(typeof(value) == "undefined") {
content = "數據異常, 此字段無值";
} else {
content = "￥ ";
var num = new Number(value);
content += num.toFixed(2);
}
return content;
}
function flowOrderStatusFormatter(value, row, index) {
var content = "";
if(typeof(value) == "undefined") {
content = "數據異常, 此字段無值";
} else {
if(value == "0") {
content = "請求失敗";
} else if(value == "1") {
content = "充值中";
} else if(value == "2") {
content = "回調時回調接口通知充值失敗";
} else if(value == "3") {
content = "充值成功";
} else if(value == "4") {
content = "已刪除";
}
}
return content;
}
function operationFormatter(value,row,index) {
return "<a href='#' onclick=\"onOrderDetailClick(\'" + row.orderid + "\')\">訂單詳情</a>";
}
function onOrderDetailClick(orderid) {
if(orderid == "" || typeof(orderid) == "undefined" || orderid == null) {
return;
}
$.ajax({
type: "GET",
cache: false,
url: contextPath + "/opfloworder/getFlowOrderDetail",
data: "orderid=" + orderid,
dataType:"json",
success: function(data){
if(data != null && typeof(data) != "undefined") {
showOrderDetail(data);
}
},
error:function(XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
}
function showOrderDetail(data) {
$("#receiveInfo").html("暱稱："+data.nickname + ",手機： " + data.mobile);
$("#orderid").html(data.orderid);
$("#ordertime").html(new Date(data.ordertime).Format("yyyy-MM-dd hh:mm:ss"));
if(data.status == 0) {
$("#flag").html("充值狀態 :");
$("#flagValue").html("請求失敗");
}else if(data.status == 1) {
$("#flag").html("充值狀態 :");
$("#flagValue").html("充值中");
}else if(data.status == 2) {
$("#flag").html("充值狀態 :");
$("#flagValue").html("回調時回調接口通知充值失敗");
}else if(data.status == 3) {
$("#flag").html("充值狀態 :");
$("#flagValue").html("充值成功");
}
$("#prodname").html(data.prodname);
$("#flownumber").html(data.flownumber+"M");
$("#prodvalue").html("￥ "+ new Number(data.prodvalue).toFixed(2));ajax

$("#order-detail-modal").modal({show:true, backdrop:false});
}

function createTimeFormatter(value,row,index) {
var time2 = new Date(value).Format("yyyy-MM-dd hh:mm:ss");
return time2;
}
function fixWidth(percent)
{
return document.body.clientWidth * percent ; //這裏你能夠本身作調整
}

function onClickRowFunction (rowIndex, rowData) {
$(this).datagrid('unselectRow', rowIndex);
}
function onLoadErrorFunction() {
window.top.location.href = contextPath + "/statics/login.jsp";
}
function onSignHistClick(memberid) {
$("#sign-detail-modal").modal({show:true, backdrop:false});
renderSignDetailDataGrid(memberid);
}
function onJourneyHisClick(memberid) {
$("#journey-detail-modal").modal({show:true, backdrop:false});
renderjourneyDetailDataGrid(memberid);
}
function renderSignDetailDataGrid(memberid) {
var signDetailDataGrid = $("#signDetailDataGrid").datagrid({
width : "auto",
height : "auto",
idField : "signid",
url : "${pageContext.request.contextPath}/memberweb/getSignDetail",
columns : [[
{field : "signid", title : "主鍵", width : fixWidth(0.1)},
{field : "memberid", title : "用戶編號", width : fixWidth(0.15)},
{field : "points", title : "獎勵保險幣(禮品)", width : fixWidth(0.15)},
{field : "signdate", title : "簽到日期", sortable:true, width : fixWidth(0.15)},
{field : "sumSignPoints", title : "簽到獎勵總保險幣", sortable:true, width : fixWidth(0.15)},
{field : "isreceived", title : "禮物領取狀態", formatter : isreceivedFormater, width : fixWidth(0.15)}
]],
fitColumns : true,
rownumbers : true,
pagination : true,
pageSize : 10,
pageList : [10, 20],
striped : true,
onBeforeLoad : function(param) {
param.pageindex = param.page;
param.pagesize = param.rows;
param.memberid = memberid;

delete param.page;
delete param.rows;

return true;
},
onClickRow: onClickRowFunction
});
signDetailDataGrid.datagrid('getPager').pagination({
layout:['list','sep','first','prev','sep','links','sep','next','last','sep','refresh']
});
}
</script>json

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
border-top: 2px solid green;
}session

thead>tr>th, table .dataTable thead>tr>td {
padding-right: 0px;
}

.input-append span {
padding-right:5px;
}

.popMain {
position:absolute;
width:200px;
height:405px;
border:1px solid #ddd;
z-index:2000;
background-color:white;
display:none;
}
.popMain .letter {
float:left;
position:relative;
height:100%;
width:41px;
border-right:1px solid #ddd;
overflow-y:auto;
}
.popMain .content {
float: left;
height: 100%;
overflow-y: auto;
width: 157px;
}
.popMain .letter span {
display:block;
padding-left:8px;
}
.popMain .content span {
display:block;
padding-left:8px;
margin-bottom: 2px;
}
.letter span a {
background-color: #efefef;
border: 1px solid #e3e3e3;
border-radius: 2px;
color: #f90;
display: inline-block;
font: bold 12px/16px "Arial";
height: 16px;
margin-bottom: 2px;
overflow: hidden;
text-align: center;
vertical-align: middle;
width: 18px;
}
</style>
</head>

<body><ol class="breadcrumb" style="background: white;"> <li id="oneLevel"><a href="#"></a></li> <li id="twoLevel"><a href="#"></a></li></ol><div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" > <div class="panel panel-default"> <div class="input-append">    按訂單號查詢： <input name="orderid" type="text" class="form-control" style="width:160px;" placeholder="訂單編號" style="padding-top:10px">   按日期區間查詢： <input name="startTime" type="text" data-options="prompt:'請選擇日期',editable:false" style="width:130px; height:36px; background-color:white; " class="easyui-datebox" />//【日曆控件】  至  <input name="endTime" type="text" data-options="prompt:'請選擇日期',editable:false" style="width:130px; height:36px; background-color:white;" class="easyui-datebox" /> <button type="button" id="orderQueryButton" class="btn btn-primary" style="margin-top: 6px">查詢</button> <button type="button" id="orderExportButton" class="btn btn-primary" style="margin-top: 6px">導出</button> </div> </div> <div class="panel panel-default"> <table id="orderDataGrid"></table> </div> </div> <div class="modal fade" id="order-detail-modal" tabindex="-1" style="border:solid 1px #add9c0;"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h4 class="h4Class">訂單詳情</h4> </div>  <div class="modal-body"> <table class="table table-bordered"> <tr style="borde-bottom:1px dotted #FFF"> <td style="width:8%;border-bottom:1px dotted">用戶信息 : </td> <td id="receiveInfo" style="width:92%;border-bottom:1px dotted">張三,13576563238,浙江省杭州市濱江區長河街道江南明庭 7-2-101</td> </tr> <tr> <td colspan="2" style="width:8%;border-top:1px dotted;font-size:16px;font-weight:bold">訂單信息</td> </tr> <tr> <td width="8%">訂單編號 : </td> <td id="orderid">23492037520</td> </tr> <tr> <td width="8%">下單時間 : </td> <td id="createtime">2015-10-12 13:28:38</td> </tr> <tr> <td id="flag" width="8%">發貨時間 : </td> <td id="flagValue">2015-10-12 18:28:38</td> </tr> </table> <table class="temp table table-bordered"> <thead> <tr > <th style="border:1px solid #ddd">商品名稱</th> <th style="border:1px solid #ddd">流量數</th> <th style="border:1px solid #ddd">訂單金額</th> <th style="border:1px solid #ddd">購買數量</th> </tr> </thead> <tbody> <tr> <td style="border:1px solid #ddd" id="prodname">30M移動流量包</td> <td style="border:1px solid #ddd" id="flownumber">30M</td> <td style="border:1px solid #ddd" id="prodvalue">￥30.00</td> <td style="border:1px solid #ddd">1</td> </tr> </tbody> </table> </div> <div class="modal-footer">  </div> </div> </div> </div> <script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/floworder.js"></script></body></html>