如何拖放表格?

最后发布: 2015-08-01 17:26:34


问题

我遵循了Ryan Bates教程

真棒。

我可以将其与列表一起使用,但是我一直在尝试使其与表一起使用,更具体地说,是与部分表一起显示的表。

<table id="habits" data-update-url="<%= sort_habits_url %>">
  <% @habits.each do |habit| %>
    <tbody id="habit_<%= habit.id %>">
      # 2 tr's & 7 td's
    </tbody>
  <% end %>
</table>

在上面的版本中,迭代是表格的倍数,因为我是使用<% rendered @habits %>从主页上渲染此部分的,所以我不必在行中添加<% @habits.each do |habit| %> <% @habits.each do |habit| %>

所以我尝试了这个:

<table id="habits" data-update-url="<%= sort_habits_url %>">
  <tbody id="habit_<%= habit.id %>">
    # 2 tr's & 7 td's
  </tbody>
</table>

但是,只有第一个表可以拖动。 使用第一个示例代码,只能拖放表的第一次迭代。

habit-sort.js.coffee

jQuery ->
  $('#habits').sortable(
    axis: 'y'
    update: ->
      $.post($(this).data('update-url'), $(this).sortable('serialize'))
  );
javascript jquery ruby-on-rails ruby jquery-ui
回答

如果要处理多个DOM,则不能使用DOM ID。 因此,您需要按类别替换ID。

处理多个图元并在每个图元中对TR进行排序: http : //jsfiddle.net/aron_aron/1jjhdtj2/2/

另外,如果您绑定<table id="habits" ,则可排序内容将是整个tbody html内容。

更新

让我尝试对可排序的工作方式做一个简单的解释。

当您调用$( "#item" ).sortable() ,您将能够对#item根目录中的每个子级进行排序(更改位置)。

这是什么意思?

如果您具有以下html:

<div class="sortable_tables">
    <table class="sortable_bodys">
        <tbody class="sortable_trs">
          <tr class="sortable_tds">
              <td>ID 1</td>
              <td>Item Name 1</td>
              <td>Action</td>
          </tr>
          <tr>

因此,您可以根据期望的行为在任何级别调用.sortable()

例如,如果要对整个表进行排序,只需调用$( ".sortable_tables" ).sortable() ,这样便可以更改在<div class="sortable_tables">内创建的任何html元素的位置。

但是,假设您要对表中的行进行排序。 因此,要对TR进行排序,您需要调用父html .select() TR的父级是一个tbody,因此$( ".sortable_trs" ).sortable()您将能够使用sortable_trs类对每个tbody中的TR进行sortable_trs