html范例 -- 易宝流量查询 -- 日历控件 -- 表格 -- 分页 -- 查询 -- 导出

最新推荐文章于 2024-07-30 10:56:44 发布

weixin_30659829

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量103

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/caer/p/5735702.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" />

【导入依赖库】

【启动入口】
$(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='#' οnclick=\"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>

.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="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>

转载于:https://www.cnblogs.com/caer/p/5735702.html

weixin_30659829

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html范例 -- 易宝流量查询 -- 日历控件 -- 表格 -- 分页 -- 查询 -- 导出

<%@ page contentType="text/html; charset=utf-8"%><!DOCTYPE html><html lang="zh-CN"><head><title>流量订单列表</title><script type="text/javascript"> var context...
复制链接

扫一扫