具有可扩展行的可排序表

Posted 2023-05-09

【中文标题】具有可扩展行的可排序表

【英文标题】：Sortable table with expandable Rows

【发布时间】：2012-03-09 02:44:26

【问题描述】：

我是 jquery/rails 新手，但在使用 .sortable() 时遇到问题。我有可扩展的行，我似乎无法获得正确的代码来拥有隐藏行，即子行，坚持可见的行，即父行。相关JS代码：

(function($)
    $.fn.jSortable = function()


    var element = this;

    var fixHelper = function(e, ui) 
        ui.children().each(function()
            $(this).width($(this).width());
        );
        return ui;
    ;

    $(element).sortable(
        helper: fixHelper,
        axis: "y",
        cursor: "move",
        items: "tr.odd2",
        distance: "30"

    );
    $(element).disableSelection();
;

)(jQuery);

父行具有类odd2，子行具有子类。

应用 .sortable() 时将 2 行锁定在一起的正确方法是什么？

我目前正在使用带有 jquery-rails 1.0.19 的 rails 3.1.1

编辑：

这里是相关的html

<table id="sortableTable">
  <tr class= 'headings'>
        <th><%= sortable "number" %></th>
        <th><%= sortable "customer_id" %></th>
        <th><%= sortable "priority" %></th>
        <th><%= sortable "quantity" %></th>
        <th><%= sortable "due_date" %></th>
        <th></th>
  </tr>

<% @jobs.each do |job| %>
  <tr class= "odd2">
    <td><%= job.number %></td>
    <td><%= job.customer %></td>
    <td><%= job.priority %></td>
    <td><%= job.quantity %></td>
    <td><%= job.due_date %></td>
    <td><%= button 'Edit', edit_job_path(job) %></td>
  </tr>

  <tr class= "child">
    <td><%= job.job_items %></td>
  </tr>
 <% end %>
</table>

<%= javascript_tag do %>
$(document).ready(function()
    $('#sortableTable tbody').jSortable();
);

<% end %>

编辑 2：我已使用 jquery-rails 2.0.0 将我的应用程序更新到 Rails 3.2.1

编辑 3：由于没有人为表格标签而不是 div 提供解决方案，而且我还没有找到任何适用于表格的东西，所以我不得不更改为 div。

【参考方案1】：

看来这就是你想要的：http://jqueryui.com/demos/sortable/#portlets

如果没有，请发布您的 HTML，以便更容易看到您要执行的操作。

具体来说，请注意可排序项目如何是一个 div 并且有子级的 div。

<div class="portlet">
    <div class="portlet-header">Feeds</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>

【讨论】：

对不起，我对 jquery 缺乏了解，但是 portlet 需要在 div 上执行吗？从您的示例中，我可以将其切换到表格、父行、隐藏行吗？

由于没有人知道如何将其应用于表格，我将不得不更改为 div 以便我可以使用它。谢谢你的回答。