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,确认是否删除并返回值,有弹窗的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/274581

相关文章

如何选择适合孤独症兄妹的学校?

在探索适合孤独症儿童教育的道路上,每一位家长都面临着前所未有的挑战与抉择。当这份责任落在拥有孤独症兄妹的家庭肩上时,选择一所能够同时满足两个孩子特殊需求的学校,更显得尤为关键。本文将探讨如何为这样的家庭做出明智的选择,并介绍星贝育园自闭症儿童寄宿制学校作为一个值得考虑的选项。 理解孤独症儿童的独特性 孤独症,这一复杂的神经发育障碍,影响着儿童的社交互动、沟通能力以及行为模式。对于拥有孤独症兄

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题:墙体两侧特征混淆误匹配,导致建图和定位偏差,表现为过门跳变、外月台走歪等 ·解决思路:预期的根治方案IGICP需要较长时间完成上线,先使用切分地图的工程化方案,即墙体两侧切分为不同地图,在某一侧只使用该侧地图进行定位 方案思路 切分原理:切分地图基于关键帧位置,而非点云。 理论基础:光照是直线的,一帧点云必定只能照射到墙的一侧,无法同时照到两侧实践考虑:关

电脑桌面文件删除了怎么找回来?别急,快速恢复攻略在此

在日常使用电脑的过程中,我们经常会遇到这样的情况:一不小心,桌面上的某个重要文件被删除了。这时,大多数人可能会感到惊慌失措,不知所措。 其实,不必过于担心,因为有很多方法可以帮助我们找回被删除的桌面文件。下面,就让我们一起来了解一下这些恢复桌面文件的方法吧。 一、使用撤销操作 如果我们刚刚删除了桌面上的文件,并且还没有进行其他操作,那么可以尝试使用撤销操作来恢复文件。在键盘上同时按下“C

C#实战|大乐透选号器[6]:实现实时显示已选择的红蓝球数量

哈喽,你好啊,我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记,这是第6篇; 接下来实现实时显示当前选中红球数量,蓝球数量; 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时,在对应的位置显示实时已选择的红球、蓝球的数量; 02 标签名称 分别设置Label标签名称为:lblRedCount、lblBlueCount

【测试】输入正确用户名和密码,点击登录没有响应的可能性原因

目录 一、前端问题 1. 界面交互问题 2. 输入数据校验问题 二、网络问题 1. 网络连接中断 2. 代理设置问题 三、后端问题 1. 服务器故障 2. 数据库问题 3. 权限问题: 四、其他问题 1. 缓存问题 2. 第三方服务问题 3. 配置问题 一、前端问题 1. 界面交互问题 登录按钮的点击事件未正确绑定,导致点击后无法触发登录操作。 页面可能存在

【机器学习】高斯过程的基本概念和应用领域以及在python中的实例

引言 高斯过程(Gaussian Process,简称GP)是一种概率模型,用于描述一组随机变量的联合概率分布,其中任何一个有限维度的子集都具有高斯分布 文章目录 引言一、高斯过程1.1 基本定义1.1.1 随机过程1.1.2 高斯分布 1.2 高斯过程的特性1.2.1 联合高斯性1.2.2 均值函数1.2.3 协方差函数(或核函数) 1.3 核函数1.4 高斯过程回归(Gauss

透彻!驯服大型语言模型(LLMs)的五种方法,及具体方法选择思路

引言 随着时间的发展,大型语言模型不再停留在演示阶段而是逐步面向生产系统的应用,随着人们期望的不断增加,目标也发生了巨大的变化。在短短的几个月的时间里,人们对大模型的认识已经从对其zero-shot能力感到惊讶,转变为考虑改进模型质量、提高模型可用性。 「大语言模型(LLMs)其实就是利用高容量的模型架构(例如Transformer)对海量的、多种多样的数据分布进行建模得到,它包含了大量的先验

【生成模型系列(初级)】嵌入(Embedding)方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入(Embedding)方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节:嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以被看作是自然语言处理中的“翻译机”,它将文本中的单词或短语转换成计算机能够理解的数学形式,即向量。 正如翻译机将一种语言

cross-plateform 跨平台应用程序-03-如果只选择一个框架,应该选择哪一个?

跨平台系列 cross-plateform 跨平台应用程序-01-概览 cross-plateform 跨平台应用程序-02-有哪些主流技术栈? cross-plateform 跨平台应用程序-03-如果只选择一个框架,应该选择哪一个? cross-plateform 跨平台应用程序-04-React Native 介绍 cross-plateform 跨平台应用程序-05-Flutte

Codeforces Round #113 (Div. 2) B 判断多边形是否在凸包内

题目点击打开链接 凸多边形A, 多边形B, 判断B是否严格在A内。  注意AB有重点 。  将A,B上的点合在一起求凸包,如果凸包上的点是B的某个点,则B肯定不在A内。 或者说B上的某点在凸包的边上则也说明B不严格在A里面。 这个处理有个巧妙的方法,只需在求凸包的时候, <=  改成< 也就是说凸包一条边上的所有点都重复点都记录在凸包里面了。 另外不能去重点。 int