小编lho*_*ppe的帖子

如何在单击表格行时使用模态显示数据(使用引导程序)

我是整个网络开发的初学者,在经过大量研究之后,我仍然无法完成这项工作.很感谢任何形式的帮助.我正在使用最新的rails版本和bootstrap来使事情变得更漂亮.

我有一个页面,其中包含一个餐厅的订单.如果单击一行,我希望它使用bootstrap在模态窗口中显示订单详细信息.我已设法通过onclick + javascript函数打开模态,但它看起来有点混乱,我仍然不知道如何加载模式的内容div与订单信息.这是我的代码:

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>
Run Code Online (Sandbox Code Playgroud)

JS:

function orderModal(order_id){
    $('#orderModal').modal({
        keyboard: true,
        backdrop: "static"
    }); …
Run Code Online (Sandbox Code Playgroud)

javascript jquery ruby-on-rails twitter-bootstrap

36
推荐指数
2
解决办法
12万
查看次数