Question

我正在使用jQuery UI进行排序，以使我的表格可以排序。该代码似乎工作正常，但因为我没有向td添加宽度，当我拖动tr时，它缩小了内容。

例如;如果我开始拖动时表格行为500px，则变为300px。我假设发生了这种情况，因为网格中没有定义宽度。那是因为我为td s使用了两个类（fix和liquid）。

fix类使td等于内容宽度，liquid使td宽度为100％。这是我对网格表的方法，而不必将宽度分配给td s。

知道如何使用我的方法进行可排序的工作吗？

Answer 1

我找到了答案here。

我稍微修改了它来克隆行，而不是将宽度添加到原始：

  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;
  },

Answer 2

我认为它可以提供帮助：

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

Answer 3

这里选择的答案是一个非常好的解决方案，但它有一个严重的错误，在原始的JS小提琴（http://jsfiddle.net/bgrins/tzYbU/）中很明显：尝试拖动最长的行（上帝保佑你，先生Rosewater ），其余的细胞宽度都会崩溃。

这意味着在拖动的单元格上固定单元格宽度是不够的 - 您还需要在表格上修复宽度。

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

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

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

这解决了拖动第一列后表格折叠的问题，但引入了一个新的问题：如果更改表格的内容，则单元格大小现在已修复。

要在添加或更改内容时解决此问题，您需要清除设置的宽度：

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

然后添加您的内容，然后再次修复宽度。

这仍然不是一个完整的解决方案，因为（特别是对于表格）你需要一个放置占位符。为此，我们需要在构建占位符的start上添加一个函数：

$('#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();

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

Answer 4

当您的表格准备好进行排序时，请调用以下代码，这将确保您的td元素具有固定的，而不会破坏表结构。

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

Answer 5

Keith的解决方案很好，但在Firefox中产生了一点点破坏，并没有加入colspans，而是提示他们。（膝盖上的旧js弦型疼痛）

替换此行：

 cellCount += colspan;

with：

 cellCount += colspan-0;

解决了这个问题。（因为js被迫将变量视为数字而不是字符串）

Answer 6

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;
}

我会在Dave的回答中加上这个评论作为评论，但我没有足够的代表这个帐户。

Answer 7

好像disableSelection() - 方法很糟糕，现在已经弃用了。我无法在Mozilla Firefox 35.0中的可排序行中使用文本输入。它不再是可以专注的。

Answer 8

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

Answer 9

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;
};

Answer 10

.sortable({
    helper: function (e, ui) {
        ui.children().each(function () {
            $(this).width($(this).width());
        });
        return ui;
    }
});

Answer 11

将sortable应用于表的tbody元素，并将帮助器设置为'clone'，如jquery-ui的API

中所述

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

jquery UI可以使用table和tr宽度进行排序

11 个答案: