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

Posted 2023-02-22

【中文标题】单击表格行（使用引导程序）时，如何使用模式显示数据？

【英文标题】：How can I show data using a modal when clicking a table row (using bootstrap)?

【发布时间】：2013-09-30 11:40:59

【问题描述】：

我是整个网络开发方面的初学者，经过大量研究后，我仍然无法完成这项工作。很感谢任何形式的帮助。我正在使用最新的 rails 版本和 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"
    );
;

【参考方案1】：

您可以做的一件事是摆脱所有这些 onclick 属性，并使用引导程序以正确的方式进行操作。您无需手动打开它们；您可以在模式打开之前指定触发器甚至订阅事件，以便您可以执行操作并在其中填充数据。

我只是将展示一个静态示例，您可以在现实世界中适应它。

在您的每个<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>'))
    );
);

Demo

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

这里的替代方法：

Demo2 或 Demo3

【讨论】：

@PSL。这是一个非常有用的例子。谢谢你。而不是完全灰显父级。如何更改行的颜色或为特定单元格添加边框线颜色，指示为特定单元格调用了模态。以便用户知道 modal 指的是哪一行？不确定，如果这已经解决或需要一个特殊的问题。任何帮助表示赞赏。谢谢

@PSL，不需要是特定的单元格。以用户意识到他正在使用特定行数据的模式的方式突出显示完整的行。让我知道它是否必须是单独的 Q SO。我可以努力创造一个。谢谢

@PSL 我可以用它在数据库中查找数据吗？在模式内？

【参考方案2】：

PSL 的解决方案在 Firefox 中不起作用。 FF 仅接受 event 作为形式参数。所以你必须找到另一种方法来识别选定的行。 我的解决方案是这样的：

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

...

【讨论】：

感谢您的提示，确实活动节目没有触发

感谢 Paul，firefox 解决方案也适用于 IE 和 Chrome。我建议使用那段代码。

【参考方案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。它非常酷且高效。

【讨论】：

我必须进行更多研究才能使 ajax 请求正常工作，但我明白了。谢谢！

我只是不知道如何执行 ajax 请求。我尝试（基于您的第一个示例）将其放入“on show”功能，但没有任何反应，当我尝试通过浏览器控制台运行它时，我得到“找不到 id=get_order 的餐厅”，就像它正在尝试使用一样用于在控制器上设置 @restaurant 变量的 url 的一部分。有什么想法吗？

查看此页面：guides.rubyonrails.org/working_with_javascript_in_rails.html