jquery ui具有固定行问题的可排序表列

Question

有一个jquery ui可排序的小部件extension，它使表列可以排序。 根据示例页面，可以将行指定为不可挖掘的。

 $(function () {
    $('#ex7').sorttable({
        placeholder: 'placeholder',
        helperCells: ':not(.footerrow td)'
    }).disableSelection();
    });​

我想以这种方式设置几个colspanned行。 但是当我在表格中间设置固定行时会出现几个问题。 第一个 - 固定行不会在拖放过程中显示为拖动，第二个 - 在几个移动表被破坏后显示。

jsfiddle example

有没有办法纠正它？

更新

找到使用绝对定位div的宽度=表宽度的解决方法，但实际上我不喜欢它

jsfiddle example

Answer 1

您遇到的问题是您将静态行的第一个单元格设置为colspan为4。

当您将该列移动到第二个位置时，带有colspan的单元格会移动到第二个位置。

现在你最终得到了第二列，其中{4}的colspan为单位提供了一个偏移所有内容的单元格。
如果你想在列中移动，我会尝试避免单元格中的colspans。

您可以通过简单地添加空单元格而不是使用colspan来解决此问题。

替换它：

<tr class="footerrow"><td colspan="4">unsortable  colspan row</td></tr>

用这个：

<tr class="footerrow"><td></td><td></td><td></td><td></td></tr>

DEMO - v1 - 使用单个空单元格而不是colspan

此外，我可能会添加一些样式来隐藏该行的列边框。

修改

我用这个玩了一会儿，并且能够提出另一种选择。请注意，它不如你的那么顺畅，并且可以更多地看到hacky。

我查看了可排序扩展程序的start和stop回调，并想知道是否可以在start添加4个单元格，并在stop再次替换它们。

使用start时，您会在排序过程中看到4个单元格，我不喜欢在拖拉操作期间想要查看页脚的内容。

我注意到当stop执行时，它会在应用实际排序之前执行，因此start为我们的目的多余。

这意味着在stop我们可以用4替换单个单元格，让它排序，使用window.setTimeout添加一个小的时间延迟，然后在一小段延迟后再用1替换4个单元格细胞。这也意味着在拖放期间页脚保持完整。

DEMO - v2 - 使用stop在排序前后重新绘制页脚

这似乎有效，但正如我所说的那样，它并不像你的那样光滑，因为重绘并导致一点点闪烁。另外，当你有一张巨大的牌桌时，我不确定setTimout来电是否足够100毫秒。

无论哪种方式，我都很开心。我希望尽管这会给你至少一些更多的想法。

DEMO v2

中的代码

  

<强> HTML
  请注意，我向data-title添加了一个属性tr，以便存储标题文字   动态添加它们。请参阅下面的页脚行HTML，所有其他HTML保持不变。

<tr class="footerrow" data-title="Additional Features"><td></td><td></td><td></td><td></td></tr>

  

<强>脚本
  添加了开始回调。如果您有任何问题，请告诉我。

$(function() {
    $specialRows = $("#ex7 tr.footerrow");

    $('#ex7').sorttable({
        placeholder: 'placeholder',
        helperCells: ':not(.footerrow td)',
        stop: function(e, ui) {
            // This replaces the 1 cell with 4 and executes before the sorting actually occurs.
            buildFooterTemplates();

            // Adding a small timeout we rever to the single cell with colspan 4
            window.setTimeout(function() {
                buildFooterRows();
            }, 100);
        }
    }).disableSelection();

    var buildFooterTemplate = function(title) {
        return '<td></td><td></td><td></td><td></td>';
    };

    var buildFooterRow = function(title) {
        return '<td colspan="4" align=center>' + title + '</td>';
    };

    var buildFooterTemplates = function() {
        $specialRows.each(function() {
            var $row = $(this);
            var title = $row.attr("data-title");

            $row.empty().append(buildFooterTemplate());
        });
    };


    var buildFooterRows = function() {
        $specialRows.each(function() {
            var $row = $(this);
            var title = $row.attr("data-title");

            $row.empty().append(buildFooterRow(title));
        });
    };

    buildFooterRows();
});​