jquery ui 可排序表列与固定行问题

Question

有一个 jquery ui 可排序小部件 extension这使得表列可以排序。 根据示例页面，可以将行指定为不可药物。

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

我想这样设置几个跨行。 但是当我在表格中间设置固定行时会出现几个问题。 第一 - 固定行在拖放过程中不会显示为拖动状态，第二 - 经过几次移动后，表格会损坏。

jsfiddle example

有什么办法可以纠正吗？

更新:

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

jsfiddle example

Answer 1

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

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

现在，您最终得到了第二列，该单元格的 colspan 为 4，这抵消了所有内容。
如果您希望在列中移动，我会尝试避免单元格中的 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 个单元格并再次替换它们在停止。

使用 start 时，您将在排序过程中看到 4 个单元格，但我不太喜欢这一点，因为我认为您希望在拖放操作期间看到页脚。

我注意到，当 stop 执行时，它会在应用实际排序之前执行，这使得 start 对于我们的目的来说是多余的。

这意味着在stop处，我们可以用4替换单个单元格，让它排序，使用window.setTimeout添加一个小的时间延迟，然后在一个小的延迟之后再次用 1 节电池替换 4 节电池。这也意味着页脚在拖放过程中保持不变。

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

这似乎有效，但正如我所说，它不像你的那么平滑，因为我的被重绘并导致一点闪烁。另外，当您有一个巨大的表时，我不确定 setTimout 调用 100 毫秒是否足够。

无论哪种方式，我都玩得很开心。我希望这至少能给您带来更多可以尝试的想法。

DEMO v2 中的代码

HTML
note I added a attribute data-title to the tr storing the title text to be able to dynamically add them. See the footer-row HTML below, all other HTML stay the same.

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

Script
Added start callback. Let me know if you have any questions.

$(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();
});​