问带有固定行问题的jquery可排序表列
EN

Stack Overflow用户

提问于 2012-11-30 14:33:16

回答 1查看 4.9K关注 0票数 1

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

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

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

小提琴手例子

有什么办法纠正吗？

更新：

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

小提琴手例子

jquery

人脸识别特惠活动

精准实时的人脸检测、分析、识别等服务，在线、离线满足多样需求，可应用于智慧零售、智慧社区、在线娱乐等多种应用场景

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-11-30 14:46:31

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

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

现在，您将得到第二列，使用colspan of 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>

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

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

编辑

我在这里玩了一会儿，想出了另一种选择。请注意，它没有您的平滑，也可以看到更多的hacky以及。

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

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

我注意到，当stop执行时，它会在实际应用排序之前执行，从而使start成为多余的。

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

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

这似乎是可行的，但正如我说的，它没有你的平滑，我的重新绘制，并造成了一点闪烁。另外，我也不确定当您有一个巨大的表时，在setTimout调用上100毫秒是否足够。

不管怎样，我在这件事上玩得很开心。我希望这至少会给你一些更多的想法来玩。

演示v2的代码

注意，我将一个属性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();
});