jQuery 单击表格行时如何使用模态显示数据（使用引导程序）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18995461/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can i show data using a modal when clicking a table row (using bootstrap)
提问by lhoppe
I'm sort of a beginner on the whole web development thing and after researching a lot i still couldn't get this done. Any help is very much appreciated. I'm using latest rails version and bootstrap to make things prettier.
我是整个 Web 开发方面的初学者，经过大量研究后，我仍然无法完成这项工作。很感谢任何形式的帮助。我正在使用最新的 Rails 版本和引导程序来使事情变得更漂亮。
I have a page with a table which contains orders from a restaurant. If you click a row i want it to show the order details in a modal window using bootstrap. I have managed to open the modal via onclick+javascript function but it looks kinda messy and i still have no clue how to load the content div of the modal with the order info. Here's the code i have for this:
我有一个包含餐厅订单的表格页面。如果您单击一行，我希望它使用引导程序在模式窗口中显示订单详细信息。我已经设法通过 onclick+javascript 函数打开了模态，但它看起来有点乱，我仍然不知道如何使用订单信息加载模态的内容 div。这是我的代码：
HTML:
HTML：
<h1>Orders</h1>
<table class="table table-striped"
<thead>
<tr>
<th>ID</th>
<th>Customer</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<% @restaurant.orders.each do |order| %>
<tr onclick="orderModal(<%= order.id %>);">
<td><%= order.id %></td>
<td><%= order.customer_id %></td>
<td><%= order.status %></td>
</tr>
<% end %>
</tbody>
</table>
<div id="orderModal" class="modal hide fade" role="dialog"
aria-labelledby="orderModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3>Order</h3>
</div>
<div id="orderDetails"class="modal-body"></div>
<div id="orderItems" class="modal-body"></div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
js:
js：
function orderModal(order_id){
$('#orderModal').modal({
keyboard: true,
backdrop: "static"
});
};
回答by PSL
One thing you can do is get rid of all those onclick attributes and do it the right way with bootstrap. You don't need to open them manually; you can specify the trigger and even subscribe to events before the modal opens so that you can do your operations and populate data in it.
您可以做的一件事是摆脱所有那些 onclick 属性，并使用引导程序以正确的方式进行。您不需要手动打开它们；您可以在模式打开之前指定触发器甚至订阅事件，以便您可以执行操作并在其中填充数据。
I am just going to show as a static example which you can accommodate in your real world.
我只是将展示一个静态示例，您可以在现实世界中使用它。
On each of your <tr>'s add a data attribute for id(i.e. data-id) with the corresponding id value and specify a data-target, which is a selector you specify, so that when clicked, bootstrap will select that element as modal dialog and show it. And then you need to add another attribute data-toggle=modalto make this a trigger for modal.
在您<tr>的每个's 上为id(ie data-id)添加一个具有相应 id 值的数据属性，并指定 a data-target，这是您指定的选择器，以便在单击时，引导程序将选择该元素作为模态对话框并显示它。然后您需要添加另一个属性data-toggle=modal以使其成为模态的触发器。
<tr data-toggle="modal" data-id="1" data-target="#orderModal">
<td>1</td>
<td>24234234</td>
<td>A</td>
</tr>
<tr data-toggle="modal" data-id="2" data-target="#orderModal">
<td>2</td>
<td>24234234</td>
<td>A</td>
</tr>
<tr data-toggle="modal" data-id="3" data-target="#orderModal">
<td>3</td>
<td>24234234</td>
<td>A</td>
</tr>
And now in the javascript just set up the modal just once and event listen to its events so you can do your work.
现在在 javascript 中只需设置一次模态，然后事件监听它的事件，这样你就可以完成你的工作。
$(function(){
$('#orderModal').modal({
keyboard: true,
backdrop: "static",
show:false,
}).on('show', function(){ //subscribe to show method
var getIdFromRow = $(event.target).closest('tr').data('id'); //get the id from tr
//make your ajax call populate items or what even you need
$(this).find('#orderDetails').html($('<b> Order Id selected: ' + getIdFromRow + '</b>'))
});
});
Do not use inline click attributes any more. Use event bindings instead with vanilla js or using jquery.
不要再使用内联点击属性。使用事件绑定代替 vanilla js 或使用 jquery。
Alternative ways here:
这里的替代方法：
回答by Paul Manthey
The solution from PSL will not work in Firefox. FF accepts event only as a formal parameter. So you have to find another way to identify the selected row. My solution is something like this:
PSL 的解决方案在 Firefox 中不起作用。FF 仅接受事件作为形式参数。因此，您必须找到另一种方法来识别所选行。我的解决方案是这样的：
...
$('#mySelector')
.on('show.bs.modal', function(e) {
var mid;
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1)
mid = $(e.relatedTarget).data('id');
else
mid = $(event.target).closest('tr').data('id');
...
回答by Max Wong
The best practice is to ajax load the order information when click tr tag, and render the information html in $('#orderDetails') like this:
最好的做法是在点击tr标签时ajax加载订单信息，并在$('#orderDetails')中渲染信息html，如下所示：
$.get('the_get_order_info_url', { order_id: the_id_var }, function(data){
$('#orderDetails').html(data);
}, 'script')
Alternatively, you can add class for each td that contains the order info, and use jQuery method $('.class').html(html_string) to insert specific order info into your #orderDetails BEFORE you show the modal, like:
或者，您可以为每个包含订单信息的 td 添加类，并使用 jQuery 方法 $('.class').html(html_string) 在显示模式之前将特定订单信息插入 #orderDetails 中，例如：
<% @restaurant.orders.each do |order| %>
<!-- you should add more class and id attr to help control the DOM -->
<tr id="order_<%= order.id %>" onclick="orderModal(<%= order.id %>);">
<td class="order_id"><%= order.id %></td>
<td class="customer_id"><%= order.customer_id %></td>
<td class="status"><%= order.status %></td>
</tr>
<% end %>
js:
js：
function orderModal(order_id){
var tr = $('#order_' + order_id);
// get the current info in html table
var customer_id = tr.find('.customer_id');
var status = tr.find('.status');
// U should work on lines here:
var info_to_insert = "order: " + order_id + ", customer: " + customer_id + " and status : " + status + ".";
$('#orderDetails').html(info_to_insert);
$('#orderModal').modal({
keyboard: true,
backdrop: "static"
});
};
That's it. But I strongly recommend you to learn sth about ajax on Rails. It's pretty cool and efficient.
就是这样。但是我强烈建议您学习有关 Rails 上的 ajax 的知识。它非常酷且高效。
