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">iccid</label><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('处理失败');}}