带有 table 和 tr 宽度的排序

我使用 jQueryUI 可排序来使我的表格网格可排序。代码似乎工作得很好，但因为我没有增加宽度的 tds，当我拖动的 tr它收缩的内容。

例如，如果开始拖动时表行为500px，则它将变为300px。我假设这是因为网格中没有定义宽度。这是因为我对 td使用了两个类(fix和 liquid)。

fix类使得 td等于内容宽度，而 liquid使得 td宽度为100% 。这是我对网格表的方法，不需要为 td分配宽度。

知道怎么用我的方法分类吗？

90052 次浏览
小开

我找到了答案。

我稍微修改了一下，以克隆这一行，而不是增加原始行的宽度:

  helper: function(e, tr)
{
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index)
{
// Set helper cell sizes to match the original sizes
$(this).width($originals.eq(index).width());
});
return $helper;
},
小开

似乎克隆这一行在 IE8上并不能很好地工作, 但最初的解决方案可以。

用 JsFiddle测试。

小开

这里选择的答案是一个非常好的解决方案，但是它有一个严重的 bug，这在最初的 JS 小提琴(http://jsfiddle.net/bgrins/tzYbU/)中很明显: 尝试拖动最长的行(上帝保佑你，罗斯沃特先生) ，其余的单元宽度崩溃。

这意味着仅仅修复被拖动单元格上的单元格宽度是不够的——还需要修复表上的单元格宽度。

$(function () {
$('td, th', '#sortFixed').each(function () {
var cell = $(this);
cell.width(cell.width());
});


$('#sortFixed tbody').sortable().disableSelection();
});

小提琴: http://jsfiddle.net/rp4fV/3/

这解决了拖动第一列后表崩溃的问题，但引入了一个新的问题: 如果更改表的内容，单元格大小现在是固定的。

为了在添加或更改内容时解决这个问题，您需要清除宽度集:

$('td, th', '#sortFixed').each(function () {
var cell = $(this);
cell.css('width','');
});

然后添加内容，然后再次修改宽度。

这仍然不是一个完整的解决方案，因为(特别是对于表)您需要一个拖放占位符。为此，我们需要在开始时添加一个函数来构建占位符:

$('#sortFixed tbody').sortable({
items: '> tr',
forcePlaceholderSize: true,
placeholder:'must-have-class',
start: function (event, ui) {
// Build a placeholder cell that spans all the cells in the row
var cellCount = 0;
$('td, th', ui.helper).each(function () {
// For each TD or TH try and get it's colspan attribute, and add that or 1 to the total
var colspan = 1;
var colspanAttr = $(this).attr('colspan');
if (colspanAttr > 1) {
colspan = colspanAttr;
}
cellCount += colspan;
});


// Add the placeholder UI - note that this is the item's content, so TD rather than TR
ui.placeholder.html('<td colspan="' + cellCount + '">&nbsp;</td>');
}
}).disableSelection();

小提琴: http://jsfiddle.net/rp4fV/4/

小开

当表准备排序时，调用以下代码, 这将确保您的 td 元素具有一个不会破坏表结构的 fix。

 $(".tableToSort td").each(function () {
$(this).css("width", $(this).width());
});
小开

将排序器应用到表的 tbody 元素，并将 helper 设置为“ clone”，如 jquery-ui 的 空气污染指数所述

$("$my-table-tbody").sortable({
helper: "clone"
});
小开

Keith 的解决方案很好，但是在 Firefox 中产生了一点小小的破坏，这并没有增加 colspans，而是提示了它们。(旧的 js 字符串类型膝盖疼痛)

取代这一行:

 cellCount += colspan;

与:

 cellCount += colspan-0;

解决问题。 (因为 js 被迫将变量视为数字而不是字符串)

小开

Dave James Miller 的答案对我很有用，但是由于我的页面上容器 div 的布局，用鼠标光标拖动的助手会偏离我的鼠标位置。为了解决这个问题，我将以下内容添加到 helper 回调中

$(document.body).append($helper);

下面是完整的回调函数，添加了以上代码行:

helper: function (e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function (index) {
// Set helper cell sizes to match the original sizes
$(this).width($originals.eq(index).width());
});


// append it to the body to avoid offset dragging
$(document.body).append($helper);


return $helper;
}

我本想在戴夫的回答中加上这句话作为评论，但是我在这个账户上没有足够的名声。

小开

现在看来，disableSelection()方法是不好的，已经被废弃了。在 Mozilla Firefox 35.0中，我不能再在可排序行中使用文本输入。只是无法集中注意力了。

小开

我认为这会有所帮助:

.ui-sortable-helper {
display: table;
}
小开 
$(function() {
$( "#sort tbody" ).sortable({
update: function () {
var order = $(this).sortable("toArray").join();
$.cookie("sortableOrder", order);
}
});
if($.cookie("sortableOrder")){
var order = $.cookie("sortableOrder").split(",");
reorder(order, $("#sort tbody"));
}
function reorder(aryOrder, element){
$.each(aryOrder, function(key, val){
element.append($("#"+val));
});
}
});
小开

JsFiddle

经过许多不同的尝试，我只是尝试了一个简单的解决方案，它完成了 Dave James Miller 的解决方案，以防止在拖动最大行时缩小表。我希望这会有所帮助:)

// Make sure the placeholder has the same with as the orignal
var start = function(e, ui) {
let $originals = ui.helper.children();
ui.placeholder.children().each(function (index) {
$(this).width($originals.eq(index).width());
});
}
// Return a helper with preserved width of cells
var helper = function(e, tr) {
let $helper = tr.clone();
let $originals = tr.children();
$helper.children().each(function (index) {
$(this).width($originals.eq(index).outerWidth(true));
});
return $helper;
};
小开 
.sortable({
helper: function (e, ui) {
ui.children().each(function () {
$(this).width($(this).width());
});
return ui;
}
});
小开

我也在寻找一个解决方案，最终它出现了:

你必须增加你的风格

.ui-sortable-helper {
display: table;
}

当声明可分类时

$('#sortable').sortable({
helper: function (e, tr){
var myHelper = [];
myHelper.push(<tr style="width:' + $('#sortable').first('tr').width() + '">);
myHelper.push($(tr).html());
myHelper.push('</tr>');
return myHelper.join('');
}
});

因此您可以毫无问题地设置 td 的百分比！


提交答案