选中页面一条数据在模态框里显示

最新推荐文章于 2023-04-25 15:28:10 发布
最新推荐文章于 2023-04-25 15:28:10 发布
阅读量1.6k 收藏 2
点赞数
分类专栏： VS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44550198/article/details/99679231
版权
本文介绍了如何在VS开发环境中，实现查询数据库数据并在页面展示。通过在每条记录后添加打开模态框的按钮，选中的数据能够在模态框中同步显示。具体实现包括在控制器编写查询方法，接收楼栋ID参数，进行多表查询，处理分页，以及在HTML中设置表格和分页，并监听表格行事件，确保模态框内的数据与选中行一致。
摘要由CSDN通过智能技术生成

开发工具与关键技术：VS 查询

作者：卢远平

撰写时间：2019.8.16

查询数据库数据显示在页面，这是非常常用的，也能算是非常基础的操作，查询出来后，我在页面的每一条数据后拼接了一个打开模态框的按钮，而我要实现选中页面的一条数据在模态框里也显示选中的那一条数据。
先是在控制器写要在模态框里显示的查询方法，首先是传入楼栋ID，好让页面传参，接着是一个多表查询写法，查询条件楼栋ID和状态为待租的数据，接着是页面显示的值，然后是获取到数据的总条数，最后是分页查询。
在这里插入图片描述

实例化表格数据，最后返回layuiTableData。

在这里插入图片描述

接着是html部分先是表头的写法，然后是指定每页显示的条数，随后是自动设置每页显示条数。

在这里插入图片描述

然后是页面表格的行监听事件，第一行写的是标注选中行样式，第二行写的是，勾选选中那一行的单选框，之后是获取页面的楼栋ID，把获取到的ID传到模态框查询的方法里去，这样就能实现选中页面一条数据在模态框里显示对应的数据。

最低0.47元/天 解锁文章
LYA(P)
关注
专栏目录
datatable添加行编辑功能，点击某一行读取该行数据并赋值给模态框
weixin_42485577的博客
09-05 2861
行编辑功能 在初始化datatable的colums时，添加一列如下 { data:'id', title:'', sortable:false, reder:function(data,type,row,meta){ return'<div class="pull-right"><a href="javascript:void(0)" onclick="edit(...
模态框的编写与应用
X_X_OO的博客
09-05 666
模态框 简介： 模态框（Modal）是在本页面上弹出的框。 概述： Bootstrap Modals（模态框）是使用定制的 Jquery 插件创建的。它可以用来创建模态窗口丰富用户体验，或者为用户添加实用功能。您可以在 Modals（模态框）中使用 Popover（弹出框）和 Tooltip（工具提示插件）。 目的： 目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下
关于点击修改框时将所选对象信息显示在模态框中（包含单选按钮和多选按钮）
qq_41294224的博客
03-16 439
废话不多说，直接上代码 html代码： <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"...
Bootstrap创建新增员工的模态框并使用ajax显示部门信息完成添加
pengxiang1998的博客
03-03 1036
逻辑： 在index.jsp的新增按钮，点击后弹出新增对话框，并前往数据库查询部门列表，显示在对话框中。 实现效果如图所示： 以上就是添加页面的模态框，那么接下来便是查询出部门信息
bootstrapTable 模态框 显示表格数据的问题
hch的博客
12-12 3447
那些div等都设置了大小了，但是到刷新数据的时候，现在数据已经出到外面了，在div外面了，类似如下图，完全不好看 1 我的模态框设置如下： <div class="modal" id="ChangeAssetsListForm" tabindex="-1" role="dialog" aria-labelledby="fLoadBillModalLabel" aria-hi...
选择模态框里的layui表格的数据后，进行多条数据回填table
weixin_44484452的博客
06-17 2319
一、 在layui渲染出来的表格里面，如何将选中的多条数据对应地回填到后面的table表格里面呢。这个问题其实说难也不难，一个是采用layui渲染出来的表格，一个是自己写的表格，要把数据从前者放到后者有时却挺困扰人的。 二、 获取数据 1.具体的第一步，先获取到选中的layui表格数据。怎么获取选中的数据，layui其实有它自己的方法的， var checkStatus =layuiTable....
BootStrap实现邮件列表的分页和模态框添加邮件的功能
09-01
模态框是Bootstrap中一种弹出式的视图，可以在不离开当前页面的情况下显示额外信息或执行操作，如添加新的邮件。模态框由三部分组成：`<div class="modal">`容器，`.modal-dialog`，和`.modal-content`。`.modal-...
Django：使用模态框新增数据，成功后提示“提交成功”，并刷新表格bootstrap-table数据...
weixin_30318645的博客
07-12 1590
废话不说先看图： 代码实现： 　　前台代码： {% load staticfiles %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title&gt...
击＋按钮，添加一条学生信息，点击-按钮；删除选中的学生信息，并弹出窗口提示“删除成功”
最新发布
12-25
在前端开发领域，实现"击+按钮，添加一条学生信息，点击-按钮；删除选中的学生信息，并弹出窗口提示“删除成功”"的功能是常见的用户交互设计，这涉及到DOM操作、事件监听、数据管理和用户反馈等多个知识点。下面将...
Vue+Bootstrap模态框的数据展示
sadprogramer的博客
12-17 1325
Vue+Bootstrap模态框的数据展示Vue项目使用Bootstrap框架模态框问题笔记环境要点 Vue项目使用Bootstrap框架模态框问题笔记 （初学者笔记） 在vue项目中使用bootstrap模态框出现的问题： 模态框在执行修改操作时应该将选中的数据展示在模态框中，修改后在进行提交，那么如何获取选中的数据，并展示呢，下面是我自己在第一次接触vue项目时自己做demo遇到的这个问题解决办法，如果有更好的办法，望大家提出 环境 Vue ，bootstrap 要点 props，父组件向子组件传值
Bootstrap模态框的使用
qq_45744011的博客
06-06 271
模态框使用，弹出模态框。
Bootstrap的模拟框加载href时只显示第一次href的内容
weixin_43434136的博客
09-16 290
bootstrap模拟框嵌入jsp页面 如果电脑上没有web容器，浏览器会阻止模拟框加载href的界面。 百度上有说往浏览器快捷方式的属性的选项：目标之后加 --allow-file–access-from-files。但是我改过之后还是报错，可能是我的操作有问题，也可能是chrome修复这个不安全操作。 设置a标签href属性。 <a href="target.jsp" data-toggle="modal" data-target="#myModal" >target url = tar
模态框数据回显简单办法
孤寡孤寡孤寡孤寡。的博客
03-14 1757
模态框数据回显简单办法（不用Ajax） <button id="editbt" οnclick="edit_customer(this)"> 先给按钮绑定一个onclick事件，然后点击按钮触发edit_customer(this)事件。 function edit_customer(obj){ var $td= $(obj).parents('tr').children('th'); var id = $td.eq(0).text();
在模态框中获取jsp页面表格中的数据
qq_1240545777的博客
04-09 5728
1.页面表格代码： &lt;form:form class="form" id="userForm" action="${ctx}/user/queryRoomType.do" method="post" style="width: 900px; color:#ffffff;"&gt; &lt;br /&gt; &lt;table class=
模态框的使用与数据的遍历
m0_63757700的博客
07-09 249
模态框的使用与数据的遍历
回填数据到模态框
weixin_44546758的博客
06-17 841
开发工具与关键技术：JavaScript 作者：LJR 撰写时间：2019年 6 月 16 日 在做修改数据的时候，可能会遇到数据回填的问题，如果我们选中了一条数据，点击修改的按钮，会弹出一个修改数据的模态框，我们需要做的是把选中的数据回填到模态框里面。那么这个该如何去实现呢？ 很简单，首先在控制器写一个查询远程数据ID的方法，方法里面查询出相对应要回填的字段，int HostId是用来接收查...
解决复选框选择一个，其他都选中问题
m0_72189030的博客
04-25 868
解决复选框选择一个，其他都选中问题
模态框创建 及 数据获取 (实例解析)
isfor_you的博客
02-25 2229
创建模态框 需要用到BootstrapDialog组件,可到官网自行下载 实现的效果：（将编号为5的行，姓名jock改为bene） 我把创建模态框封装为一个函数，可以随时调用 这里是基于Vue+axios+node.js写的 用node.js写的后台接口，获取到数据库内表的值 用axios请求获取数据 页面表格的代码如下： <div id="table" style="margin-top: 50px;"> <table class="table table-hover t
如何在model模态框里显示在页面选择的内容
05-23
1. 在模态框中添加一个标签，用于显示选中的内容。例如： ```html 您选择的内容是：<span id="selected-content"></span> ``` 2. 在页面中添加一个事件监听器，用于在用户选择内容时更新模态框中的显示。例如：...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值