单击表格行(使用引导程序)时,如何使用模式显示数据? [英] How can I show data using a modal when clicking a table row (using bootstrap)?
问题描述
我是整个Web开发领域的初学者,经过大量研究后,我仍然无法完成这项工作.很感谢任何形式的帮助.我正在使用最新的Rails版本和引导程序来使事情更漂亮.
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.
我有一个带有表格的页面,其中包含来自餐厅的订单.如果单击一行,我希望它使用引导程序在模式窗口中显示订单详细信息.我已经设法通过onclick + javascript函数打开模态,但是看起来有点混乱,我仍然不知道如何使用订单信息加载模态的内容div.这是我的代码:
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:
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:
function orderModal(order_id){
$('#orderModal').modal({
keyboard: true,
backdrop: "static"
});
};
推荐答案
您可以做的一件事是摆脱所有这些onclick属性,并使用引导程序正确执行此操作.您无需手动打开它们;您可以指定触发器,甚至可以在模式打开之前预订事件,以便您可以进行操作并在其中填充数据.
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.
我将以静态示例的形式展示您可以在现实世界中看到的示例.
I am just going to show as a static example which you can accommodate in your real world.
在每个< tr>
上,为具有相应ID的 id
(即 data-id
)添加一个数据属性值并指定 data-target
(这是您指定的选择器),以便在单击时,引导程序将选择该元素作为模式对话框并显示它.然后,您需要添加另一个属性 data-toggle = modal
,以使其成为模式触发器.
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=modal
to make this a trigger for 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>
现在,在javascript中,只需设置一次模态,然后事件监听其事件,以便您可以进行工作.
And now in the javascript just set up the modal just once and event listen to its events so you can do your work.
$(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>'))
});
});
Demo
请勿再使用内联点击属性.使用事件绑定代替香草js或jquery.
替代方法:
Demo2 或
Demo2 or Demo3
这篇关于单击表格行(使用引导程序)时,如何使用模式显示数据?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!