Ajax实例,选择table中要处理的内容,点击button,确认是否删除并返回值,有弹窗

本文主要是介绍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('处理失败');}}

这篇关于Ajax实例,选择table中要处理的内容,点击button,确认是否删除并返回值,有弹窗的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/Sparks550/article/details/120716594
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/274581

相关文章

MySQL CTE (Common Table Expressions)示例全解析

《MySQLCTE(CommonTableExpressions)示例全解析》MySQL8.0引入CTE,支持递归查询,可创建临时命名结果集,提升复杂查询的可读性与维护性,适用于层次结构数据处... 目录基本语法CTE 主要特点非递归 CTE简单 CTE 示例多 CTE 示例递归 CTE基本递归 CTE 结

Spring Boot 中的默认异常处理机制及执行流程

《SpringBoot中的默认异常处理机制及执行流程》SpringBoot内置BasicErrorController,自动处理异常并生成HTML/JSON响应,支持自定义错误路径、配置及扩展,如... 目录Spring Boot 异常处理机制详解默认错误页面功能自动异常转换机制错误属性配置选项默认错误处理

游戏闪退弹窗提示找不到storm.dll文件怎么办? Stormdll文件损坏修复技巧

《游戏闪退弹窗提示找不到storm.dll文件怎么办?Stormdll文件损坏修复技巧》DLL文件丢失或损坏会导致软件无法正常运行,例如我们在电脑上运行软件或游戏时会得到以下提示:storm.dll... 很多玩家在打开游戏时,突然弹出“找不到storm.dll文件”的提示框,随后游戏直接闪退,这通常是由于

MySQL多实例管理如何在一台主机上运行多个mysql

《MySQL多实例管理如何在一台主机上运行多个mysql》文章详解了在Linux主机上通过二进制方式安装MySQL多实例的步骤,涵盖端口配置、数据目录准备、初始化与启动流程,以及排错方法,适用于构建读... 目录一、什么是mysql多实例二、二进制方式安装MySQL1.获取二进制代码包2.安装基础依赖3.清

SpringBoot 异常处理/自定义格式校验的问题实例详解

《SpringBoot异常处理/自定义格式校验的问题实例详解》文章探讨SpringBoot中自定义注解校验问题,区分参数级与类级约束触发的异常类型,建议通过@RestControllerAdvice... 目录1. 问题简要描述2. 异常触发1) 参数级别约束2) 类级别约束3. 异常处理1) 字段级别约束

Apache Ignite缓存基本操作实例详解

《ApacheIgnite缓存基本操作实例详解》文章介绍了ApacheIgnite中IgniteCache的基本操作,涵盖缓存获取、动态创建、销毁、原子及条件更新、异步执行,强调线程池注意事项,避免... 目录一、获取缓存实例(Getting an Instance of a Cache)示例代码:二、动态

linux批量替换文件内容的实现方式

《linux批量替换文件内容的实现方式》本文总结了Linux中批量替换文件内容的几种方法,包括使用sed替换文件夹内所有文件、单个文件内容及逐行字符串,强调使用反引号和绝对路径,并分享个人经验供参考... 目录一、linux批量替换文件内容 二、替换文件内所有匹配的字符串 三、替换每一行中全部str1为st

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

MySQL 8 中的一个强大功能 JSON_TABLE示例详解

《MySQL8中的一个强大功能JSON_TABLE示例详解》JSON_TABLE是MySQL8中引入的一个强大功能,它允许用户将JSON数据转换为关系表格式,从而可以更方便地在SQL查询中处理J... 目录基本语法示例示例查询解释应用场景不适用场景1. ‌jsON 数据结构过于复杂或动态变化‌2. ‌性能要

Java堆转储文件之1.6G大文件处理完整指南

《Java堆转储文件之1.6G大文件处理完整指南》堆转储文件是优化、分析内存消耗的重要工具,:本文主要介绍Java堆转储文件之1.6G大文件处理的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言文件为什么这么大?如何处理这个文件?分析文件内容(推荐)删除文件(如果不需要)查看错误来源如何避