Bootstrap模态框里 再弹模态框

article/2025/8/18 3:42:59

Bootstrap模态框里 再弹模态框

    • 后端代码
    • 点击编辑 按钮 将参数赋值隐藏 input 中 , 便于修改 获取对应id
    • 修改模态框
    • 详情模态框

Alt

后端代码

/*** 财务审核使用详情** @param request* @param id* @return*/@RequestMapping(params = "getUseDatil")@ResponseBodypublic JSONArray getUseDatil(HttpServletRequest request, String id) {id = id.trim();User user = (User) request.getSession().getAttribute("user");String username = user.getUsername();if (StringUtils.isBlank(username)) {return null;//获取账户信息失败，需要重新登入}List<Map<String, Object>> dataMap1 = DBHelper.getInstance().getDataMap("SELECT order_no,coupon_no,airline FROM coupon_manage  WHERE id  = '" + id + "'");String order_no = dataMap1.get(0).get("order_no") + "";String couponNo = dataMap1.get(0).get("coupon_no") + "";String airline = dataMap1.get(0).get("airline") + "";JSONArray objects = new JSONArray();List<Map<String, Object>> dataMap = DBHelper.getInstance().getDataMap("SELECT  id,order_no,ticket_no,zf_price,zf_bz,cg_price,use_status  FROM   orderRecord3 WHERE refund_quan_order like '%" + order_no + "%' ");if (dataMap.size() > 0) {for (int i = 0; i < dataMap.size(); i++) {JSONObject jsonObject = new JSONObject();String id1 = dataMap.get(i).get("id") + "";String order_no1 = dataMap.get(i).get("order_no") + "";String ticket_no = dataMap.get(i).get("ticket_no") + "";String zf_price = dataMap.get(i).get("zf_price") + "";String zf_bz = dataMap.get(i).get("zf_bz") + "";String cg_price = dataMap.get(i).get("cg_price") + "";String use_status = dataMap.get(i).get("use_status") + "";if ("0".equals(use_status)){use_status = "未知";}if ("3".equals(use_status)){use_status = "部分使用(财务)";}if ("4".equals(use_status)){use_status = "已使用(财务)";}jsonObject.put("id1", id1);jsonObject.put("order_no", order_no1);jsonObject.put("ticket_no", ticket_no);jsonObject.put("zf_price", zf_price);jsonObject.put("zf_bz", zf_bz);jsonObject.put("cg_price", cg_price);jsonObject.put("use_status", use_status);objects.add(jsonObject);}}if ("ASIA".equals(airline)) {List<Map<String, Object>> dataMap2 = DBHelper.getInstance().getDataMap("SELECT  id,orderNo,ticket,original,cur,price,use_status  FROM   AutoPayLog WHERE cardNum like '%" + couponNo + "%' ");if (dataMap2.size() > 0) {for (int i = 0; i < dataMap2.size(); i++) {JSONObject jsonObject = new JSONObject();String id1 = dataMap2.get(i).get("id") + "";String orderNo = dataMap2.get(i).get("orderNo") + "";String ticket = dataMap2.get(i).get("ticket") + "";String original = dataMap2.get(i).get("original") + "";String cur = dataMap2.get(i).get("cur") + "";String price = dataMap2.get(i).get("price") + "";String use_status = dataMap2.get(i).get("use_status") + "";if ("0".equals(use_status)){use_status = "未知";}if ("3".equals(use_status)){use_status = "部分使用(财务)";}if ("4".equals(use_status)){use_status = "已使用(财务)";}jsonObject.put("id1", id1);jsonObject.put("order_no", orderNo);jsonObject.put("ticket_no", ticket);jsonObject.put("zf_price", original);jsonObject.put("zf_bz", cur);jsonObject.put("cg_price", price);jsonObject.put("use_status", use_status);objects.add(jsonObject);}}if (dataMap.size()==0&&dataMap2.size()==0){return objects;}}if (dataMap.size()==0&&!"ASIA".equals(airline)){return objects;}return objects;}/*** 财务审核* 状态转换** @param request* @param id* @param* @return*/@RequestMapping(params = "changeOneStatus", produces = "text/html; charset=utf-8")@ResponseBodypublic String changeOneStatus(HttpServletRequest request, String id, String id1, String status7) {id = id.trim();id1 = id1.trim();logger.info("id:"+id+"====>id1:"+id1+"=====>"+status7);User user = (User) request.getSession().getAttribute("user");String username = user.getUsername();if (StringUtils.isBlank(username)) {return "error, get user error ,please login again";//获取账户信息失败，需要重新登入}int quanxian = 0;if ("孙盼".equals(username)||"刘云".equals(username)||"张雅囡".equals(username)){quanxian = 1;}if (quanxian == 0){return "0";}/*  if (!exePerson.equals(username)) {return "error, 转换状态用户名字和锁定人必须一致";//如果转换状态的 用户名和锁单的用户名不一致，不可以转换状态}*/loglog(username, "扭转退回券管理状态", "扭转状态:" + request.getParameter("status7"));List<Map<String, Object>> dataMap1 = DBHelper.getInstance().getDataMap("SELECT order_no FROM coupon_manage  WHERE id  = '" + id + "'");String order_no = dataMap1.get(0).get("order_no") + "";List<Map<String, Object>> dataMap = DBHelper.getInstance().getDataMap("SELECT  id   FROM   orderRecord3 WHERE refund_quan_order like '%" + order_no + "%' AND id = "+id1+" ");int status = 0;if (request.getParameter("status7").equals("已使用(财务)")) {status = 4;String upsql = "";if (dataMap.size()>0){upsql = "update orderRecord3 set use_status = ? where id = ?";}else {upsql = "update AutoPayLog set use_status = ? where id = ?";}logger.info(username+upsql);int i = DBHelper.getInstance().updateSql(upsql, new Object[]{status, id1});if (i>0){String upcoupon = "update coupon_manage set is_use = ? where id = ?";DBHelper.getInstance().updateSql(upcoupon, new Object[]{status, id});insertInfoLog(id, username, "扭转为已使用(财务);id:" + id);return "success";}else {return "error";}}if (request.getParameter("status7").equals("部分使用(财务)")) {status = 3;String upsql = "";if (dataMap.size()>0){upsql = "update orderRecord3 set use_status = ? where id = ?";}else {upsql = "update AutoPayLog set use_status = ? where id = ?";}System.out.println(upsql);int i = DBHelper.getInstance().updateSql(upsql, new Object[]{status, id1});if (i>0){String upcoupon = "update coupon_manage set is_use = ? where id = ?";DBHelper.getInstance().updateSql(upcoupon, new Object[]{status, id});insertInfoLog(id, username, "扭转为部分使用(财务);id:" + id);return "success";}else {return "error";}}return "error 未获取到要扭转的状态";}

点击编辑 按钮 将参数赋值隐藏 input 中 , 便于修改 获取对应id

 function setOneChange(id,id1) {$("#id7").val(id);$("#id8").val(id1);$("#myModal7").modal("show");}

修改模态框

<%--财务单条修改--%>
<div class="modal fade7" id="myModal7" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title">状态转换 </h4></div><form id="updateOneStatus" action="coupon.do?changeOneStatus" method="POST"><div class="modal-body"><input type="hidden" id="id7" name="id7" value=""/><input type="hidden" id="id8" name="id8" value=""/><div class="input-group"><span class="input-group-addon"style="font-size: 16px; width: 193px;text-align:left; ">状态:</span><select class="form-control" id="status7" name="status" list="status3list"><option value="已使用(财务)">已使用(财务)</option><option value="部分使用(财务)">部分使用(财务)</option><%--<option value="已退出">已退出</option>--%></select></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary" onclick="setOneStatus()">确定转换</button></div></div></form></div><!-- /.modal-content --></div><!-- /.modal-dialog -->
</div><!-- /.modal --><%--财务单条修改--%>

详情模态框

<%--查看使用详情--%>
<div class="modal fade" id="myModal6" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title">使用详情 </h4></div><form id="updateuseStatus" action="" method="POST"><div class="modal-body"><table  id="act_table" border="1"></table><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><%--<button type="button" class="btn btn-primary" onclick="setStatus()">确定转换</button>--%></div></div></form></div><!-- /.modal-content --></div><!-- /.modal-dialog -->
</div><!-- /.modal --><%--查看使用详情--%>
```
bttton 按钮
```javascript
'<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal6" οnclick="getUseDatil(\'' + row.id + '\')">使用详情</button>'
```解析后端返回的JaonArray 拼接标签写入  table
```javascript
//查看使用详情function getUseDatil(id) {$.ajax({dataType : "json",type: "POST",url: "coupon.do?getUseDatil",data: {"id": id},success: function (resMsg) {console.log(resMsg);var flag=false;for(var x in resMsg){flag=true;}if (!flag) {alert("没找到使用记录!!!");// window.location.reload();}if (resMsg == "0") {alert("没权限查看");// window.location.reload();}if (resMsg != "0" && resMsg != null) {//alert(resMsg);var list=new StringBuffer();//自定义的拼接字符串函数，高效。$.each(resMsg,function(i,actObj){//i表示循环的下标，actObj表示循环的对象，可自定义名字list.append("<tr>");list.append("<td>"+actObj.id1+"</td>");list.append("<td>"+actObj.order_no+"</td>");list.append("<td>"+actObj.ticket_no+"</td>");list.append("<td>"+actObj.zf_price+"</td>");list.append("<td>"+actObj.zf_bz+"</td>");list.append("<td>"+actObj.cg_price+"</td>");list.append("<td>"+actObj.use_status+"</td>");list.append("<td class='text-center'>");// list.append("<button class= 'btn btn-primary btn-sm' data-toggle= 'modal' data-target= '#myModal7' οnclick= 'setOneChange("+id+" ,"+actObj.id1+")'>状态转换</button>");//  list.append("<button class= 'btn btn-primary btn-sm' data-toggle= 'modal' data-target= '#myModal7' >状态wu转换</button>");list.append("<a href='javascript:;' class='btn btn-xs blue' οnclick=\"setOneChange('" + id + "','" + actObj.id1 + "')\" title='编辑'>编辑</a>");list.append("</td>");list.append("</tr>");});var head="<tr class='text-center'><td>编号</td><td>使用订单号</td><td>票号</td><td>使用金额</td><td>币种</td><td>折合人民币</td><td>使用状态</td><td>审核操作</td></tr>";$("#act_table").html(head+list.toString());}}, error: function (data) {alert(data);}});/*//$("#id6").val(id);*/}function StringBuffer() {this.__strings__ = new Array();}StringBuffer.prototype.append = function (str) {this.__strings__.push(str);return this;    //方便链式操作}StringBuffer.prototype.toString = function () {return this.__strings__.join("");}//查看使用详情
```

http://chatgpt.dhexx.cn/article/sfgPdAW9.shtml

相关文章

新增模态框

新增模态框

平时我们在VS中也常常会用到模态框&#xff0c;今天我们就来聊聊模态框&#xff0c;但是我要说的是新增模态框&#xff0c;而不是修改模态框喔。在书写模态框代码时&#xff0c;我们还要引用一个插件: 然后就可以进行对代码进行书写了。 我们先说说模态框插件的用法&#xff0c…
阅读更多...
html模态框常见问题,模态框无法弹出的问题

html模态框常见问题,模态框无法弹出的问题

问题起因&#xff1a; 昨晚写到了一个模态框&#xff0c;用到了bootstrap和jquery&#xff0c;依赖的js已经复制到项目中&#xff0c;并在Jsp页面上进行了引用&#xff0c;最初的引用如下&#xff1a; 问题描述&#xff1a; 模态框无法正常弹出&#xff0c;使用浏览器查看资源看…
阅读更多...
Vue模态框的封装

Vue模态框的封装

一、模态框 1、模态框&#xff1a;若对话框不关闭&#xff0c;不能操作其父窗口 2、非模态框&#xff1a;对话框不关闭&#xff0c;可以操作其窗口 二、Vue组件实现模态框的功能 1、模态框是一个子组件 2、显示和隐藏由父组件决定 3、对话框的标题也是由父组件传递的 4、对话框…
阅读更多...
Bootstrap之模态框

Bootstrap之模态框

前言 模态框&#xff08;Modal&#xff09;是覆盖在父窗体上的子窗体。通常&#xff0c;目的是显示来自一个单独的源的内容&#xff0c;可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 用法 您可以切换模态框&#xff08;Modal&#xff09;插件的隐藏内…
阅读更多...
php什么是模态框,bootstrap模态框有什么用

php什么是模态框,bootstrap模态框有什么用

Bootstrap Modals(模态框)是使用定制的Jquery 插件创建的。 它可以用来创建模态窗口丰富用户体验&#xff0c;或者为用户添加实用功能。您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件)。(推荐学习&#xff1a;Bootstrap视频教程) 将通过一些实例和解释…
阅读更多...
弹出模态框

弹出模态框

想必大家都知道弹出层的重要性&#xff0c;在很多的地方都能用到这个方法&#xff0c;所以说这种是非常的普遍的实用性&#xff0c;在大家编写过程中也是很常见的模态框以及弹出层&#xff0c;基本也是一个概念。 插件不可缺少 1.多窗口模式 层叠置顶 Esc 关闭 为什么是说多窗…
阅读更多...
模态框动态赋值

模态框动态赋值

模态框动态赋值&#xff0c;可以有多种方式&#xff1a;1、每次一个个填充&#xff1b;2、直接针对模态框中的ID赋值。。。 今天说下同事犯的错误&#xff0c;大家引以为鉴&#xff1a; 首先如图&#xff1a; 他在点击详情链接时&#xff0c;是能拿到相关参数的&#xff0c;进…
阅读更多...
html 自定义模态框,自定义对话框、模态框

html 自定义模态框,自定义对话框、模态框

致敬iphoneX的小刘海....自定义模态框 body{ text-align: center; } #modalBg{ position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0.2); width: 100%; height: 100%; margin: auto; display: none; } #modal{ min-width: 30%; background-color: white; bor…
阅读更多...
html怎么自动弹出模态框,纯CSS实现带点击模态框外部自动关闭的模态框

html怎么自动弹出模态框,纯CSS实现带点击模态框外部自动关闭的模态框

在网页中我们经常会用到模态框，一般会用于显示表单或者是提示信息。由于模态框涉及到页面上比较多的交互效果，最简单的交互就是打开以及关闭两个操作，而关闭又会涉及是否需要在打开状态下点击模态框外部能够关闭这样的功能，因为这些交互问题，所以一般都会首先考虑到使用Ja…
阅读更多...
模态框拖拽

模态框拖拽

1、点击弹出层&#xff0c;回弹出模态框&#xff0c;并且显示半透明的遮挡层 2、点击关闭按钮&#xff0c;可以关闭模态框&#xff0c;并且同时关闭灰色半透明遮挡层 3、鼠标放到模态框最上面一行&#xff0c;可以按住鼠标拖拽模态框在页面中移动 4、鼠标松开&#xff0c;可…
阅读更多...
模态框案例

模态框案例

模态框 模态框在很多网站是很常见的&#xff0c;比如网易云音乐登录&#xff0c;百度登录等网站。 网易云音乐如图&#xff1a; 让我们来看看代码吧&#xff01;&#xff01;注意&#xff1a;这里为了更好的演示效果&#xff0c;增加了遮挡层。 HTML部分&#xff1a; <!-- …
阅读更多...
零基础Bootstrap入门教程(16)--模态框

零基础Bootstrap入门教程(16)--模态框

点此查看 所有教程、项目、源码导航 本文目录 1. 概述2. 模态框样式3. 按钮直接关联模态框4. 通过JS方法打开/关闭模态框5. 调整大小6. 动画效果7. 小结 1. 概述 模态框这个名字有点高雅了&#xff0c;其实就是对话框&#xff0c;用来弹出一个新的界面。 模态框的使用非常的场…
阅读更多...
模态框

模态框

模态对话框&#xff08;Modal Dialogue Box&#xff0c;又叫做模式对话框&#xff09;&#xff0c;是指在用户想要对对话框以外的应用程序进行操作时&#xff0c;必须首先对该对话框进行响应 摘自百度百科 先放上效果图&#xff1a; 基本功能为点击窗口中间的发光按钮&#xff…
阅读更多...
HTML+CSS+JavaScript实现模态框（可拖拽）

HTML+CSS+JavaScript实现模态框（可拖拽）

前言 模态框是指覆盖在父窗口上的子窗口&#xff0c;但在HTML网页中&#xff0c;并没有父窗口和子窗口的概念。这里是通过可隐藏的遮罩层和一个可隐藏的盒子来实现模态框的效果。 效果演示&#xff1a; 下面开始详细介绍如何实现一个可拖拽的模态框。只对 JS 部分详解&#x…
阅读更多...
Bootstrap系列之模态框（Modal）

Bootstrap系列之模态框（Modal）

文章の目录 1、工作原理2、示例2.1、Modal组件2.2、在线演示2.3、静态背景2.4、滚动内容2.5、垂直居中2.6、提示和弹窗2.7、使用网格2.8、不同模态框的内容2.9、改变动画2.10、移除动画2.11、动态高度2.12、Accessibility2.13、嵌入YouTube视频 3、Optional sizes4、用法4.1、通…
阅读更多...
Oracle数据迁移

Oracle数据迁移

本文主要提及使用exp,imp以及Oracle数据泵等工具如何进行数据迁移&#xff1a; 一、数据迁移工具 1、数据迁移工具 &#xff08;1&#xff09;数据泵 &#xff08;2&#xff09;外部表&#xff1a;external table &#xff08;3&#xff09;数据加载工具&#xff1a;sqllo…
阅读更多...
MySQL数据库- 几种数据迁移的方法详解都在这了！看完必懂

MySQL数据库- 几种数据迁移的方法详解都在这了！看完必懂

数据迁移的几种方式 - MySQL数据库 本文关键字&#xff1a;MySQL、数据库、数据迁移、导入、导出 文章目录 数据迁移的几种方式 - MySQL数据库 一、数据迁移 1. 数据的生命周期2. 数据迁移的发生二、数据导出 1. 命令方式2. 软件方式三、数据导入 1. 命令方式2. 软件方式四、…
阅读更多...
数据迁移方法

数据迁移方法

在我的《高并发系统设计目标之可扩展性》博文中提到&#xff0c;随着业务的发展&#xff0c;我们会沿着AKF的Y轴进行微服务化的改造。但是沿着Y轴的重构过程中往往涉及到分库分表。那么这时就需要进行数据库的迁移了。沿着AKF的Z轴也类似&#xff0c;那么迁移有什么原则呢&…
阅读更多...
如何高效地进行大规模数据迁移？

如何高效地进行大规模数据迁移？

导读 我们在做一次系统业务模型重构的时候&#xff0c;往往会遇到把旧模型表中的数据迁移到新模型表中&#xff0c;如果这时候&#xff0c;我们旧表中的数据规模已达到千万级以上&#xff0c;那么&#xff0c;这个从旧表迁移到新表的过程会非常漫长&#xff0c;而业务仍需快速推…
阅读更多...
电脑数据怎么迁移？

电脑数据怎么迁移？

“最近我的电脑越来越卡&#xff0c;运行程序时还会出现卡死奔溃的现象&#xff0c;陪伴我多年的电脑到了退休的时候了。购买了一台新款的笔记本电脑&#xff0c;打开软件运行多么的流畅&#xff0c;别提多高兴了&#xff01;可是&#xff0c;我想把旧电脑的数据导入到新电脑怎…
阅读更多...
推荐文章

Copyright @ 2022~2023