将数据表行值传递给模态
Posted
技术标签:
【中文标题】将数据表行值传递给模态【英文标题】：Pass datatable row value to modal 【发布时间】：2021-10-22 20:29:28 【问题描述】：亲爱的，
当我单击编辑时，我试图将一行中的列值传递给模式，但这不起作用。我不确定如何诚实地做到这一点。 当我单击编辑时，应该打开一个模式。我的目标是在禁用字段中显示当前图像名称，并让管理员输入新名称以重命名它。
我的管理模板来源 => https://startbootstrap.com/theme/sb-admin-2
数据表代码：
<tbody>
<?php
foreach ($imagesPath as $imageId=>$imagePath)
echo "<tr>";
echo " <td> <img src=".$imagePath." border='0' height=200px width=200px /> </td>";
echo " <td name='imageName'>".substr($imagePath, 59)."</td>";
echo " <td>
<a href='#' class='btn btn-info btn-circle' data-toggle='modal' data-target='#editModal' data-val=".$imagesPath[$imageId].">
<i class='fas fa-edit'></i>
</a>
<a href='#' class='btn btn-danger btn-circle'>
<i class='fas fa-trash'></i>
</a>
</td>";
echo "</tr>";
?>
</tbody>
模式代码：
<!-- Edit Modal-->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="renameModal"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="renameModal">Rename Image</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<label class="control-label" for="oldImageName">Old Image Name</label>
<input id="oldImageName" class="form-control form-control-user" disabled></input><br>
<label class="control-label" for="newImageName">New Image Name</label>
<input id="newImageName" class="form-control form-control-user" type="text" ></input>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="#">Rename</a>
</div>
</div>
</div>
</div>
js代码：
<script>
$('#editModal').on('show.bs.modal', function(e)
var oldImageValue = $(event.relatedTarget).data('val');
$(e.currentTarget).find('input[id="oldImageName"]').val(oldImageValue);
);
</script>
我尝试实现的是Passing data to a bootstrap modal 中提到的解决方案。但它没有用。您能帮忙解决以上问题吗？
【问题讨论】：
【参考方案1】：在您的 html 中，您使用的是以下属性：
data-val=".$imagesPath[$imageId]."
然后你似乎正试图在你的 javascript 中使用：
var oldImageValue = $(event.relatedTarget).data('val');
这有3个问题：
(1) 这是attribute，而不是data
(2) 它的名字是data-val 而不是val
(3) 您的函数将事件称为e，而不是event。
因此你需要使用：
var oldImageValue = $(e.relatedTarget).attr('data-val');
在那之后，我怀疑你会有一些额外的问题......
上述更改将导致 .$imagesPath[$imageId]. 的值填充到模式中 - 我认为这不是您想要的。
如何解决此问题取决于问题之外的信息，但例如，您可以更改 HTML 以包含其他属性 - 例如，如下所示：
data-image-id=".$imagesPath[$imageId]."
data-image-name=".$imagesPath[$imageName]."
... and whatever else you may need...
以上只是一个建议 - 您可能需要根据自己的需要进行调整。
使用上述更改的演示：
$(document).ready(function()
var table = $('#example').DataTable();
$('#editModal').on('show.bs.modal', function(e)
var oldPersonValue = $(e.relatedTarget).attr('data-name');
$(e.currentTarget).find('input[id="oldPersonName"]').val(oldPersonValue);
);
);<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.js"></script>
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>123</td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>
<a href="#"
class="btn btn-info btn-circle"
data-toggle="modal"
data-target="#editModal"
data-val="123"
data-name="Tiger Nixon">
<i class='fas fa-edit'></i>edit
</a>
</td>
</tr>
<tr>
<td>234</td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>
<a href="#"
class="btn btn-info btn-circle"
data-toggle="modal"
data-target="#editModal"
data-id="234"
data-name="Garrett Winters">
<i class='fas fa-edit'></i>edit
</a>
</td>
</tr>
<tr>
<td>345</td>
<td>Ashton Cox</td>
<td>Junior "Technical" Author</td>
<td>San Francisco</td>
<td>
<a href="#"
class="btn btn-info btn-circle"
data-toggle="modal"
data-target="#editModal"
data-id="345"
data-name="Ashton Cox">
<i class='fas fa-edit'></i>edit
</a>
</td>
</tr>
</tbody>
</table>
<!-- Edit Modal-->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="renameModal"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="renameModal">Rename Person</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<label class="control-label" for="oldPersonName">Old Person Name</label>
<input id="oldPersonName" class="form-control form-control-user" disabled></input><br>
<label class="control-label" for="newPersonName">New Person Name</label>
<input id="newPersonName" class="form-control form-control-user" type="text" ></input>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="#">Rename</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>之后，另一个问题可能是您希望实际保存更改并重新显示保存的数据。如果是这种情况，那么可能需要一个新问题，您可以在其中显示相关代码/尝试。
【讨论】：
感谢您的回答@andrewjames 这正是我所需要的！以上是关于将数据表行值传递给模态的主要内容，如果未能解决你的问题，请参考以下文章