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>
【导入依赖库】
<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" />
<script type="text/javascript" src="${pageContext.request.contextPath }/statics/jquery-easyui-1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/common.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/statics/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/statics/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/statics/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" type="text/javascript" src="${pageContext.request.contextPath }/statics/js/session.js"></script>
【导入依赖库】
<script type="text/javascript">
【启动入口】
$(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 : onLoadErrorFunction
});//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));
$("#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>
<style type="text/css">
body {
width: 100%;
height: 100%;
}
.modal-dialog {
margin: 10px auto;
width: 1000px;
}
.modal-body .table-bordered > tbody > tr > td{
border: 0px solid #FFF;
padding:5px;
}
.temp > tbody > tr > td {
border: 1px solid #999;
}
.modal-body table {
border:0;
}
.modal-content .modal-header {
padding: 2px 5px 2px 20px;
}
.modal-header .close {
margin-top: 8px;
margin-right:5px;
}
.h4Class {
font-size:17px;
}
.nav-tabs > li > a:hover {
border:#FFF;
background-color:#FFF;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
border-top: 2px solid green;
}
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="mobile" type="text" class="form-control" style="width:150px;" placeholder="手机号码" style="padding-top:10px">
<input name="prodname" type="text" class="form-control" style="width:150px;" placeholder="商品名称" style="padding-top:10px" >
<select name="status" class="selectpicker show-tick form-control" style="width:150px;" data-size="5" style="padding-top:7px">
<option value="" selected="selected">订单状态</option>
<option value="0">请求失败</option>
<option value="1">充值中</option>
<option value="2">回调时回调接口通知充值失败</option>
<option value="3">充值成功</option>
</select> -->
按订单号查询：
<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>
<!-- style="border-bottom:1px dotted" -->
<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">
<!-- <button class="btn btn-primary">确定</button>-->
</div>
</div>
</div>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/floworder.js"></script>
</body>
</html>
浙公网安备 33010602011771号