如何在单击表格行时使用模态显示数据（使用引导程序） [英] How can i show data using a modal when clicking a table row (using bootstrap)

问题描述

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

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.

我有一个页面，其中包含来自餐馆的订单。如果单击一行，我希望它使用bootstrap在模态窗口中显示订单详细信息。我已设法通过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属性并使用bootstrap以正确的方式执行。您无需手动打开它们;您可以在模式打开之前指定触发器甚至订阅事件，以便您可以执行操作并在其中填充数据。

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.

On每个< tr> 为 id 添加数据属性（即数据-id ）并使用相应的id值并指定 data-target ，这是您指定的选择器，因此在单击时，bootstrap将选择该元素作为模态对话框并显示它。然后你需要添加另一个属性 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

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

此处的替代方式：

Demo2 或 演示3

Demo2 or Demo3

这篇关于如何在单击表格行时使用模态显示数据（使用引导程序）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！