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

Question

我是整个网络开发的初学者,在经过大量研究之后,我仍然无法完成这项工作.很感谢任何形式的帮助.我正在使用最新的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>

JS:

function orderModal(order_id){
    $('#orderModal').modal({
        keyboard: true,
        backdrop: "static"
    });
};

Answer 1

你能做的一件事是摆脱所有那些onclick属性,并以正确的方式使用bootstrap.您无需手动打开它们; 您可以在模式打开之前指定触发器甚至订阅事件,以便您可以执行操作并在其中填充数据.

我将展示一个静态的例子,你可以在你的现实世界中容纳.

在每个<tr>人的上面添加一个数据属性id(即data-id)和相应的id值,并指定一个data-target你指定的选择器,这样当单击时,bootstrap会选择该元素作为模态对话框并显示它.然后你需要添加另一个属性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>

现在在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>'))
    });
});

演示

不要再使用内联点击属性.使用事件绑定代替vanilla js或使用jquery.

替代方式:

DEMO2或 Demo3

Answer 2

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');

...