带有固定行问题的jquery可排序表列
有一个jquery可排序小部件扩展，它使表列可排序。根据示例页面，可以将行指定为不可药。
$(function () {
$('#ex7').sorttable({
placeholder: 'placeholder',
helperCells: ':not(.footerrow td)'
}).disableSelection();
});我想用这种方式设置几行横行。但是，当我在表的中间设置固定行时，会出现几个问题。第一个固定行在拖放期间不显示为拖动，第二个-在几个移动表被破坏后显示。
有什么办法纠正吗？
更新：
使用带有width=table宽度的绝对定位div找到解决方法，但实际上我不喜欢它
回答 1
Stack Overflow用户
发布于 2012-11-30 22: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();
});https://stackoverflow.com/questions/13654155
复制相似问题
腾讯云开发者
