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

有一个jQueryUISortable小部件，可以对表列进行排序。 根据第页的示例，可以将行指定为不可破坏

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

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

有什么办法可以纠正吗

更新：

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

---

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

colspan

将该列移动到第二个位置时，带有

colspan

的单元格将移动到第二个位置

现在，您将以第二列SON结束，该列用4的

colspan

表示单元格，这将抵消所有内容。
如果您希望在列中移动，我会尽量避免在单元格中使用

colspan

您可以通过简单地添加空单元格而不是使用

colspan

来解决此问题

替换此项：

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

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

$（函数（）{
$specialRows=$（“#ex7 tr.footerrow”）；
$（'#ex7'）。可排序({
占位符：“占位符”，
helperCells:'：不是（.footerrow td）'，
停止：功能（e、ui）{
//这将用4替换1单元格，并在排序实际发生之前执行。
buildFooterTemplates（）；
//使用colspan 4向单个单元格添加一个小超时
setTimeout（函数（）{
buildFooterRows（）；
}, 100);
}
}).disableSelection（）；
var buildFooterTemplate=函数（标题）{
返回“”；
};
var buildFooterRow=函数（标题）{
返回“”+标题+“”；
};
var buildFooterTemplates=函数（）{
$specialRows.each（函数（）{
var$row=$（此）；
var title=$row.attr（“数据标题”）；
$row.empty（）.append（buildFooterTemplate（））；
});
};
var buildFooterRows=函数（）{
$specialRows.each（函数（）{
var$row=$（此）；
var title=$row.attr（“数据标题”）；
$row.empty（）.append（buildFooterRow（title））；
});
};
buildFooterRows（）；
});​

你好，弗朗索瓦，谢谢你的回复。是的，很明显，使用不带colspan的row应该可以避免此类问题。但我需要创建单元格值的命名组。这就是为什么带有单个单元格的行而不是colspan行不适合我的情况。@user947668:我不确定您所说的命名组是什么意思，但您可以始终将数据属性或类应用于

td

或

tr

元素，以进行逻辑分组，如果这是适合的话。@user947668:我喜欢您的技巧，而且它是正确的在UI中也可以平滑/无缝。不错。我对扩展有了更多的乐趣，并添加了另一种处理方法，使用扩展的

stop

回调。虽然这可能比你的更黑客，它不是那么顺利，但由于我有乐趣与此工作，我想我可能会张贴它的完整性。也许你会找到一种全新的方式来处理这一切。如果你这样做，请张贴它，我将非常感兴趣。

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

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