javascript - Bootstrap:动态编辑数据的模态对话框
问题描述
这个问题可能是重复的,但我不知道要搜索什么好的关键词来找到我正在寻找的解决方案。
我正在一个向用户显示表格的网站上工作。在一列中,表格包含用户可以编辑的注释。为此,我为该列中的每一行添加了一个按钮,以打开一个引导模式对话框,用户可以在其中编辑与特定行关联的注释。我还有一个 JavaScript 函数“saveNote(recordId)”,它从模式对话框的输入字段中读取输入的文本,然后通过 ajax 帖子将其发送到服务器。
现在我的问题是:如何以及在哪里存储当前正在编辑的行的 ID,以便可以将其传递给 saveNote() 函数?我在引导文档中找到了一个示例,但仅涵盖将数据动态传递到模态对话框(变化模态内容)。在模态对话框中是否有任何常用方法可以做到这一点,或者我是否需要在 JavaScript 中使用全局变量?
解决方案
基本上,将id
每一行的data-id
属性放在行按钮的属性中。然后将模态绑定到show.bs.modal
事件,然后用于$(e.relatedTarget).data('id')
获取data-id
打开模态的按钮。检查评论以获取其他解释
$(function() {
$('#exampleModal').on('show.bs.modal', function(e) {
$('.modalTextInput').val('');
let btn = $(e.relatedTarget); // e.related here is the element that opened the modal, specifically the row button
let id = btn.data('id'); // this is how you get the of any `data` attribute of an element
$('.saveEdit').data('id', id); // then pass it to the button inside the modal
})
$('.saveEdit').on('click', function() {
let id = $(this).data('id'); // the rest is just the same
saveNote(id);
$('#exampleModal').modal('toggle'); // this is to close the modal after clicking the modal button
})
})
function saveNote(id) {
let text = $('.modalTextInput').val();
$('.recentNote').data('note', text);
console.log($('.recentNote').data('note'));
console.log(text + ' --> ' + id);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input class="modalTextInput form-control" placeholder="Text Here" />
</div>
<div class="modal-footer">
<button type="button" class="saveEdit btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<table class="table table-bordered">
<tbody>
<tr>
<td>Some data here</td>
<td>
<button class="btn btn-success btn-sm" data-id="1" data-toggle="modal" data-target="#exampleModal">Edit</button>
</td>
</tr>
<tr>
<td>Another data here</td>
<td>
<button class="btn btn-success btn-sm" data-id="2" data-toggle="modal" data-target="#exampleModal">Edit</button>
</td>
</tr>
<tr>
<td>More data here</td>
<td>
<button class="btn btn-success btn-sm" data-id="3" data-toggle="modal" data-target="#exampleModal">Edit</button>
</td>
</tr>
</tbody>
</table>
<p class="recentNote"></p>
推荐阅读
- python - 在 Tkinter 滑块中,您可以将范围从线性变为指数,以便在处理大数字时更轻松地选择数字?
- sql - SQL全文搜索搜索部分关键字的不同结果
- postgresql - AWS DMS 无法复制数据
- javascript - 将innerHTML作为文本而不是html放在元素中
- python-3.x - 用 Pandas 在另一列的条件下替换字符串列以特定子字符串结尾
- python - 如何设置 DATABASE_URL 环境变量
- wordpress - 模块 '"tapable"' 没有导出的成员 'Tapable'
- python - AttributeError:模块“tensorflow.compat.v2”没有属性“extract_image_patches”
- python - 如何检查一个列表是否包含在另一个列表中,但要考虑到顺序
- python - 如何在 Python 中使用 tkinter 更改文本框(条目)的字体颜色