在单击表行(使用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.

我是网络开发的初学者，在研究了很多之后，我还是做不到。非常感谢您的帮助。我正在使用最新的rails版本和引导程序使事情变得更漂亮。

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:

我有一页有一张桌子，上面有餐馆的订单。如果单击一行，我希望它使用bootstrap在模式窗口中显示订单细节。我已经成功地通过onclick+javascript函数打开了模态，但是它看起来有点混乱，而且我仍然不知道如何用order info加载模态的content 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"
    });
};

3 个解决方案

#1

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.

你可以做的一件事就是去掉所有的onclick属性，用bootstrap用正确的方式进行操作。不需要手动打开;您可以指定触发器，甚至在模式打开之前订阅事件，以便您可以进行操作并在其中填充数据。

I am just going to show as a static example which you can accommodate in your real world.

我将展示一个静态的例子你可以在现实世界中适应它。

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.

在您的每一个's上，为id(即data-id)添加一个具有相应id值的数据属性，并指定一个数据目标(您指定的选择器)，以便在单击时引导程序将该元素选择为模态对话框并显示它。然后需要添加另一个属性data-toggle=modal来让它成为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>

And now in the javascript just set up the modal just once and event listen to its events so you can do your work.

现在在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

演示

Do not use inline click attributes any more. Use event bindings instead with vanilla js or using jquery.

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

Alternative ways here:

替代方法:

Demo2 or Demo3

以及接下来或Demo3

#2

The solution from PSL will not work in Firefox. FF accepts event only as a formal parameter. So you have to find another way to identify the selected row. My solution is something like this:

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

...

#3

The best practice is to ajax load the order information when click tr tag, and render the information html in $('#orderDetails') like this:

最佳实践是在单击tr标记时ajax加载订单信息，并以$('#orderDetails')的形式呈现信息html:

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

Alternatively, you can add class for each td that contains the order info, and use jQuery method $('.class').html(html_string) to insert specific order info into your #orderDetails BEFORE you show the modal, like:

或者，您可以为包含订单信息的每个td添加类，并使用jQuery method $('.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"
  });
};

That's it. But I strongly recommend you to learn sth about ajax on Rails. It's pretty cool and efficient.

就是这样。但是我强烈建议您在Rails上学习ajax。它非常酷和高效。

#1