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

Question

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

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

的fix类使得td等于所述内容的宽度和liquid使td宽度100%.这是我对网格表的方法,而不必为tds 分配宽度.

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

Answer 1

我在这里找到了答案.

我稍微修改它以克隆行,而不是向原始添加宽度:

  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/)中很明显:尝试拖动最长的行(God Bless You,Mr玫瑰水),其余的细胞宽度崩溃.

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

$(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

克隆行似乎在IE8上运行不正常,但原始解决方案确实如此.

用jsFiddle测试.

Answer 5

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

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