Ajax实例，选择table中要处理的内容，点击button，确认是否删除并返回值，有弹窗
前端样式：
前端代码：
<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">发货前，改套餐需求div>
<div class="layui-form layui-card-header layuiadmin-card-header-auto">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">iccidlabel>
<div class="layui-input-block">
<input name="iccid" placeholder="请输入" autocomplete="off" class="layui-input"
type="text">
div>
div>
<div class="layui-inline">
<label class="layui-form-label">卡号label>
<div class="layui-input-block">
<input name="msisdn" placeholder="请输入" autocomplete="off" class="layui-input"
type="text">
div>
div>
<div class="layui-inline">
<label class="layui-form-label">运营商label>
<div class="layui-input-block">
<select name="operatorId" lay-verify="">
<option>全部option>
{volist name="OperatorName" id="OperatorName"}
<option value="{$OperatorName.id}">{$OperatorName.name}option>
{/volist}
select>
div>
div>
<div class="layui-inline">
<label class="layui-form-label">处理状态label>
<div class="layui-input-block">
<select name="taskStatus" lay-verify="">
<option>全部option>
<option selected="selected" value="0">未处理option>
<option value="1">已处理option>
select>
div>
div>
<div class="layui-inline">
<label class="layui-form-label">处理方式label>
<div class="layui-input-block">
<select name="executeWay" lay-verify="">
<option>全部option>
<option value="1">系统option>
<option value="2">人工option>
select>
div>
div>
<div class="layui-inline">
<button class="layui-btn layuiadmin-btn-useradmin" lay-submit=""
lay-filter="LAY-user-front-search">
<i class="layui-icon layui-icon-search layuiadmin-button-btn">i>
button>
div>
<div style="display: none">
<button class="layui-btn layuiadmin-btn-useradmin" lay-submit=""
lay-filter="export_all" id="export_all">
导出
button>
div>
div>
div>
<div class="layui-card-body">
<script type="text/html" id="toolbar">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="isSuccess">处理完成</button>
<input type="hidden" name="ycid" value="true">
</div>
script>
<table class="layui-hide" id="test-table-page" lay-filter="test-table-page">table>
div>
div>
div>
div>
div>
<script src="__STATIC__/js/get_excel.js">script>
<script>
layui.config({
base: '__STATIC__/layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'table', 'form','laydate','excel'], function () {
var admin = layui.admin
, form = layui.form
, layer = layui.layer
, table = layui.table
, excel = layui.excel;
//监听搜索
form.on('submit(LAY-user-front-search)', function (data) {
var field = data.field;
//执行重载
table.reload('test-table-page', {
where: field,page: {
curr: 1}
});
});
let data_cols = [[
{
type: 'checkbox'},
{
field: "id", title: "业务流水号", width:200},
{
field: "account", title: "用户名", width:200},
{
field: "iccid", title: "iccid", width:200},
{
field: "msisdn", title: "卡号", width:200},
{
field: "operatorName", title: "运营商", width:200},
{
field: "operatorCity", title: "所属地", width:200},
{
field: "packageType", title: "卡类型", width:200},
{
field: "packageCodeSys", title: "套餐编码", width:200},
{
field: "packageName", title: "变更套餐", width:400},
{
field: "taskStatus", title: "处理状态", width:200},
{
field: "executeWay", title: "处理方式", width:200},
{
field: "addTime", title: "创建时间", width:200},
]];
//导出表格
let url='{:Url("showList")}';
getExcel(form,excel,url,data_cols);
table.render({
elem: '#test-table-page'
, url: '{:Url("showList")}'
, toolbar: "#toolbar"
, limit: 10
, limits: [10, 20, 40, 80, 160, 500, 1000, 5000, 10000]
, defaultToolbar: ['filter', 'print',{
title: '导出全部'
,layEvent: 'EXPORT_ALL'
,icon: 'layui-icon-export'
}]
, cols: data_cols,
page: true
});
//头工具栏事件-处理完成
table.on('toolbar(test-table-page)', function (obj) {
if (obj.event == 'EXPORT_ALL') {
document.getElementById("export_all").click();
}
//layui数据表格监听按钮
var checkStatus = table.checkStatus(obj.config.id);
if (obj.event == 'isSuccess') {
var data = checkStatus.data;
layer.confirm('确定这'+data.length+'张卡的套餐修改完成了吗，确定则无法撤销？', {
btn: ['确定','我再检查一下']
}, function(){
$.ajax({
'url':'{:Url("TmpFlowChangePackage/ProcessingComplete")}',
'data':JSON.stringify(data),
'success':function(data){
if (data.code === 1) {
parent.layer.alert(data.msg,{
title: '成功'
});
location.reload();
} else {
parent.layer.alert(data.msg,{
title: '失败'
});
location.reload();
}
},
'dataType':'json',//返回的格式
'type':'post',//发送的格式
});
}, function(){
layer.msg('谢谢，小心驶得万年船',{
time: 20000, //20s后自动关闭
btn: ['知道了']
});
});
}
});
});
script>
代码解析：
关注【处理完成】button。
<div class="layui-card-body">
<script type="text/html" id="toolbar">
<div class="layui-btn-container">
//'isSuccess',定义触发点击事件
<button class="layui-btn layui-btn-sm" lay-event="isSuccess">处理完成</button>
</div>
script>
//这个table用来获取值，也就是这个button需要控制的内容
<table class="layui-hide" id="test-table-page" lay-filter="test-table-page">table>
div>
JS代码
//头工具栏事件-处理完成
table.on('toolbar(test-table-page)', function (obj) {
//锁定button控制的页面范围
if (obj.event == 'EXPORT_ALL') {
document.getElementById("export_all").click();
}
var checkStatus = table.checkStatus(obj.config.id);
if (obj.event == 'isSuccess') {
var data = checkStatus.data;//获取选择table里的内容数据
layer.confirm('确定这'+data.length+'张卡的套餐修改完成了吗，确定则无法撤销？', {
btn: ['确定','我再检查一下']
}, function(){
$.ajax({
'url':'{:Url("TmpFlowChangePackage/ProcessingComplete")}',//控制器地址
'data':JSON.stringify(data),
'success':function(data){
//返回内容
if (data.code === 1) {
parent.layer.alert(data.msg,{
title: '成功'
});
location.reload();//页面重载
} else {
parent.layer.alert(data.msg,{
title: '失败'
});
location.reload();//页面重载
}
},
'dataType':'json',//返回的格式
'type':'post',//发送的格式
});
}, function(){
layer.msg('谢谢，小心驶得万年船',{
//点击【'确定','我再检查一下'】button的弹出窗口
time: 20000, //20s后自动关闭
btn: ['知道了']
});
});
}
});
js动画
后端处理代码
/**
* 发货前改套餐--处理完成button
*/
public function ProcessingComplete()
{
$data = $this->request->getInput();//获取ajax传递的值
$json_data = json_decode($data, true);
//判断没有选择table的内容判断
if (empty($json_data)) {
$this->error('请选择套餐！');
}
$id = array();
//获得业务流水号。因为$json_data获取的数据是一整条table数据，因此需要遍历拿出来他们的id，拼成一个新数组
foreach ($json_data as $value) {
array_push($id, $value['id']);
}
//重新拼成一个数组，这个是和java接口方，沟通好的数据格式
$requestData = array(
'taskIdList' => $id,
'taskDealStatus' => 'true',
"businessType" => 'DGD_CHG_PKG'
);
//处理完成button
$OperatorName = Paas::request('/sim/home/disposeOfData', $requestData);
//根据接口的返回值，判断是否处理成功
if ($OperatorName['status'] == 0) {
$this->success('处理完成');
} else {
$this->error('处理失败');
}
}