Layui-admin代码实例探寻Layui使用的点滴：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<link rel="stylesheet" href="/payplatform-admin/templates/static/layui/css/layui.css"
media="all">
<link rel="stylesheet" href="/payplatform-admin/templates/static/style/admin.css" media="all">
</head>
<body>
<div class="layui-card layadmin-header">
<div class="layui-breadcrumb" lay-filter="breadcrumb">
</div>
</div>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header"
style="border-bottom: 0px solid #f6f6f6; padding-top: 10px;height: 100px">
<form class="layui-form" action="" lay-filter="component-form-group">
<div class="test-table-reload-btn" style="margin-bottom: 10px;">
<div class="layui-inline" style="width: 120px">
<input class="layui-input" lay-verify="walletNumberCode"
name="walletNumberCode"
placeholder="账户编码" autocomplete="off">
</div>
<div class="layui-inline" style="width: 120px">
<input class="layui-input" lay-verify="numberCode" name="numberCode"
placeholder="支付单号" autocomplete="off">
</div>
<div class="layui-inline" style="width: 120px">
<input class="layui-input" lay-verify="externalNo" name="externalNo"
placeholder="交易单号" autocomplete="off">
</div>
<div class="layui-inline" style="width: 120px">
<input class="layui-input" lay-verify="payChannel" name="payChannel"
placeholder="支付通道" autocomplete="off">
</div>
<div class="layui-inline" style="width: 120px">
<input class="layui-input" lay-verify="amount" name="amount"
placeholder="支付金额"
autocomplete="off">
</div>
<div class="layui-inline" style="width: 120px">
<input class="layui-input" lay-verify="requestNo" name="requestNo"
placeholder="请求流水号" autocomplete="off">
</div>
<div class="layui-inline" style="width:120px">
<select name="platform" id="platform">
<option value="">请选择平台</option>
<option value="小商城">小商城</option>
<option value="拼团">拼团</option>
<option value="服务商">服务商</option>
<option value="语文小商城">语文小商城</option>
<option value="语文服务商">语文服务商</option>
<option value="语文拼团">语文拼团</option>
<option value="周边商城">周边商城</option>
</select>
</div>
<div class="layui-inline" style="width: 120px">
<select name="status" id="orderStatus">
<option value="">请选择状态</option>
<option value="INIT">未支付</option>
<option value="SUCCESS">已支付</option>
</select>
</div>
<div class="layui-inline" style="width: 120px">
<select name="ifDivision" id="ifDivision">
<option value="">请选择分账</option>
<option value="true">是</option>
<option value="false">否</option>
</select>
</div>
<button class="layui-btn" data-type="reload" lay-submit lay-filter="*"
style="float: right">搜索
</button>
<button type="reset" class="layui-btn layui-btn-primary"
style="float: right; margin-right: 15px;">重置
</button>
<br>
<div class="layui-inline">
<input type="text" class="layui-input" lay-verify="startTime"
name="startTime"
id="startTime" placeholder="创建开始时间" style="width: 120px"
autocomplete="off">
</div>
<div class="layui-inline">
<input type="text" class="layui-input" lay-verify="endTime"
name="endTime"
id="endTime" placeholder="创建结束时间" style="width: 120px"
autocomplete="off">
</div>
<div class="layui-inline">
<input type="text" class="layui-input" lay-verify="startPayTime"
name="startPayTime" id="startPayTime" placeholder="支付开始时间"
style="width: 120px" autocomplete="off">
</div>
<div class="layui-inline">
<input type="text" class="layui-input" lay-verify="endPayTime"
name="endPayTime"
id="endPayTime" placeholder="支付结束时间" style="width: 120px"
autocomplete="off">
</div>
</form>
</div>
</div>
<div class="layui-card-body">
<table class="layui-hide" id="menuTable" lay-filter="menuTable"></table>
</div>
</div>
</div>
</div>
</div>
<script type="text/html" id="toolbar">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="deposit">对公充值</button>
<button class="layui-btn layui-btn-sm" lay-event="transfor_04">转营销账户</button>
</div>
</script>
<!--
<script type="text/html" id="op">
{
{# if(d.status === 'INIT' && d.payProduct === '转账支付' ){ }}
<a class="layui-btn layui-btn-xs" lay-event="confirm">人工确认支付</a>
{
{# } }}
{
{# if(d.payChannel === '分账通分账版' && ( d.ifDivision == '' || d.ifDivision == null || !d.ifDivision) && d.platform == '拼团'){ }}
<a class="layui-btn layui-btn-xs" lay-event="division">分账</a>
{
{# } }}
</script>
-->
<script type="text/html" id="ifDivisionRender">
{
{# if( d.ifDivision){ }}
是
{
{# } }}
{
{# if( !d.ifDivision ){ }}
否
{
{# } }}
</script>
<script type="text/html" id="processFee">
{
{# if( d.paymethod == '微信小程序支付'){ }}
{
{ d.paymentFee * 0.0035 }}
{
{# } }}
{
{# if( d.paymethod == '支付宝'){ }}
{
{ d.paymentFee * 0.006 }}
{
{# } }}
{
{# if( d.paymethod == '分账通余额支付'){ }}
0
{
{# } }}
</script>
<script type="text/html" id="statusRender">
{
{# if(d.status === 'INIT' ){ }}
未支付
{
{# } }}
{
{# if(d.status === 'SUCCESS' ){ }}
已支付
{
{# } }}
</script>
<script type="text/javascript"
src="/payplatform-admin/templates/static/javascripts/jquery.min.js"></script>
<script type="text/javascript"
src="/payplatform-admin/templates/static/javascripts/jquery.base64.js"></script>
<script type="text/javascript"
src="/payplatform-admin/templates/static/javascripts/inside.js"></script>
<script src="/payplatform-admin/templates/static/layui/layui.js"></script>
<script type="text/javascript">
var _count = 0
var isOpen = 0;
layui.config({
base: '/payplatform-admin/templates/static/' //静态资源所在路径
}).use([ 'table', 'upload','laytpl','laydate'], function () {
var table = layui.table, form = layui.form, upload = layui.upload;
var $ = layui.$;
var laydate = layui.laydate;
table.render({
elem: '#menuTable'
, url: '/payplatform-admin/pay_order/list'
, toolbar: '#toolbar',
defaultToolbar: [ 'exports']
, title: '列表'
,height: 'full-150'
, cols: [[
{field: 'platform', title: '交易平台'},
{field: 'ifDivision', title: '是否分账', templet: "#ifDivisionRender"},
{field: 'walletNumberCode', title: '账户编码'}
,{field: 'number', title: '支付单编号'}
,{field: 'externalNo', title: '交易单号'}
,{field: 'paymentFee', title: '支付金额'}
,{field: 'processFee', title: '支付手续费', templet: "#processFee"}
,{field: 'payChannel', title: '支付通道'}
,{field: 'paymethod', title: '支付方法'}
,{field: 'status', title: '状态', templet: "#statusRender"}
,{field: 'returnUrl', title: '客户端返回地址',width:'10%'}
,{field: 'createTime', title: '创建时间', templet: "<div class='each{
{d.id}}'>{
{ layui.util.toDateString(d.createTime,'yyyy-MM-dd HH:mm:ss') }}</div>"}
,{field: 'paymentTime', title: '付款时间', templet: "<div> {
{# if(d.paymentTime!= null ){ }} {
{ layui.util.toDateString(d.paymentTime,'yyyy-MM-dd HH:mm:ss') }} {
{# } }} </div>"}
,{field: 'requestNo', title: '支付流水号',width:'10%'}
//, {fixed: 'right', title: '操作', toolbar: '#op'}
]]
, id: 'menuTable'
, page: true
,limits:[10,50,100,200,500,1000]
});
//监听行工具事件
table.on('tool(menuTable)', function(obj){
var data = obj.data;
if(obj.event === 'confirm'){
layer.confirm('真的要确认付款吗?', function(index){
$.ajax({
url: "/payplatform-admin/pay_order/confirmPayment",
data:{'id':data.id},
beforeSend: function(){
$(".layui-layer-btn0").text('提交中...');
$(".layui-layer-btn0").attr({ disabled: "disabled" });
},
complete: function(){
$(".layui-layer-btn0").removeAttr("disabled");
},
success: function (res) {
if (res.error_code == '1') {
layer.msg('操作成功', {icon: 6});
} else {
layer.msg(res.message, {icon: 5});
}
}
});
});
}
if(obj.event === 'division'){
layer.confirm('真的要分账吗?', function(index){
$.ajax({
url: "/payplatform-admin/tfs/division",
data:{'payOrderNo':data.number,'modulerName':'收银台','pageActionName':'支付订单-手动分账','remark':'收银台->支付订单->手动分账'},
beforeSend: function(){
$(".layui-layer-btn0").text('提交中...');
$(".layui-layer-btn0").attr({ disabled: "disabled" });
},
complete: function(){
$(".layui-layer-btn0").removeAttr("disabled");
},
success: function (res) {
if (res.error_code == '1') {
layer.msg('操作成功', {icon: 6});
obj.del();
layer.close(index);
} else {
layer.msg(res.message, {icon: 5});
}
}
});
});
}
});
//头工具栏事件
table.on('toolbar(menuTable)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
var datas = table.cache.menuTable;
switch(obj.event){
case 'deposit':
layer.open({
type: 2,
area: ['50%', '90%'],
skin: 'layui-layer-rim',
content: ['/payplatform-admin/templates/rms_sys/pay_order/deposit.html', 'no']
});break;
case 'transfor_04':
layer.open({
type: 2,
area: ['50%', '90%'],
skin: 'layui-layer-rim',
content: ['/payplatform-admin/templates/rms_sys/pay_order/transfor_04.html', 'no']
});break;
case 'more_division':
layer.confirm('真的要批量分账吗?', function(index){
_count = 0
isOpen = 0;
sendDivision(datas,index);
});break;
};
});
/* 监听提交 */
form.on('submit(*)', function (data) {
var $startTime=$("#startTime").val();
var $endTime=$("#endTime").val();
var $startPayTime=$("#startPayTime").val();
var $endPayTime=$("#endPayTime").val();
if($startTime.length > 0){
$startTime = $startTime + " 00:00:00";
var start = new Date($startTime.replace(/-/g,"/")).getTime();
var end = new Date().getTime(); // 当前时间
if(start > end){
layer.msg('开始时间不能大于当前时间', {icon: 5});
return false;
}
}
if($endTime.length > 0){
$endTime = $endTime + " 23:59:59";
}
if($startPayTime.length > 0){
$startPayTime = $startPayTime + " 00:00:00";
var startPayTime = new Date($startPayTime.replace(/-/g,"/")).getTime();
var end = new Date().getTime(); // 当前时间
if(startPayTime > end){
layer.msg('开始支付时间不能大于当前时间', {icon: 5});
return false;
}
}
if($endPayTime.length > 0){
$endPayTime = $endPayTime + " 23:59:59";
}
if($startTime.length > 0 && $endTime.length > 0){
var start = new Date($startTime.replace(/-/g,"/")).getTime();
var end = new Date($endTime.replace(/-/g,"/")).getTime();
if(start > end){
layer.msg('开始时间不能大于结束时间', {icon: 5});
return false;
}
}
if($startPayTime.length > 0 && $endPayTime.length > 0){
var startPayTime = new Date($startPayTime.replace(/-/g,"/")).getTime();
var endPayTime = new Date($endPayTime.replace(/-/g,"/")).getTime();
if(startPayTime > endPayTime){
layer.msg('开始支付时间不能大于支付结束时间', {icon: 5});
return false;
}
}
data.field.startTime = $startTime ;
data.field.endTime = $endTime ;
data.field.startPayTime = $startPayTime ;
data.field.endPayTime = $endPayTime ;
layui.table.reload('menuTable', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: data.field
}, 'data');
return false;
});
laydate.render({
elem: '#startTime'
});
laydate.render({
elem: '#endTime'
});
laydate.render({
elem: '#startPayTime'
});
laydate.render({
elem: '#endPayTime'
});
});
function sendDivision(datas,index) {
if (isOpen == 1){
layer.close(index)
return false;
}
$.ajax({
url: "/payplatform-admin/tfs/division",
data: {'payOrderNo': datas[_count].number,'modulerName':'收银台','pageActionName':'支付订单-批量分账','remark':'收银台->支付订单->批量分账'},
beforeSend: function () {
$(".layui-layer-btn0").text('提交中...');
$(".layui-layer-btn0").attr({disabled: "disabled"});
},
complete: function () {
$(".layui-layer-btn0").removeAttr("disabled");
},
success: function (res) {
if (res.error_code == '1' || res.error_code=='分账成功') {
$("tr[data-index='"+_count+"']" ).css({
"background-color": "#00FF00",
'color': 'white'
});
} else {
$("tr[data-index='"+_count+"']" ).css({
"background-color": "#FF0000",
'color': 'white'
});
$("tr[data-index='"+_count+"']" ).find('.laytable-cell-1-0-13').text(res.message);
}
var dumper = datas.length-1;
if (_count >= dumper){
isOpen = 1;layer.close(index)
}else{
_count++;
sendDivision(datas,index);
}
}
});
}
</script>
</body>
</html>