1

有一个 jquery ui 可排序小部件扩展，它使表格列可排序。根据示例页面，可以将行指定为不可下药。

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

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

jsfiddle 示例

有什么办法可以纠正吗？

更新：

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

jsfiddle 示例

4

1 回答 1

3

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

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

现在你最终得到第二列，它用colspan4 来包含单元格，这会抵消一切。如果您想在列中移动，
我会尽量避免在单元格中。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>

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

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

编辑

我用这个玩了更长的时间，并且能够想出另一种选择。请注意，它不像您的那么平滑，并且也可以看到更多hacky。

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

使用时，start您将在排序期间看到 4 个单元格，我不喜欢我认为您希望在拖放操作期间看到页脚的程度。

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

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

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

这似乎可行，但正如我所说，它不像你的那样平滑，因为我的重绘并导致一点闪烁。此外，我不确定setTimout当你有一张巨大的桌子时，100 毫秒的通话时间是否足够。

无论哪种方式，我都玩得很开心。我希望这至少会给你一些想法。

来自 DEMO v2 的代码

HTML
note 我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();
});​
于 2012-11-30T22:46:31.437 回答