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的数据属性（即data-target）并使用相应的ID值，并指定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>以使其成为模态的触发器。

$(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>'))
    });
});

现在在javascript中只需设置一次模态，事件就会听取它的事件，这样你就可以开展工作了。

{{1}}

<强> Demo

不再使用内联点击属性。使用事件绑定代替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');

...

Answer 3

最佳做法是在点击tr标签时ajax加载订单信息，并在$（'＃orderDetails'）中呈现信息html，如下所示：

  $.get('the_get_order_info_url', { order_id: the_id_var }, function(data){
    $('#orderDetails').html(data);
  }, 'script')

或者，您可以为包含订单信息的每个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：

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"
  });
};

就是这样。但我强烈建议你在Rails上学习ajax。它非常酷，效率很高。

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

3 个答案: