jQuery UI Сортируемый с таблицей и tr шириной - PullRequest
153 голосов
/ 20 августа 2009

Я использую сортировку jQuery UI для сортировки сетки моего стола. Код работает нормально, но поскольку я не добавляю ширину к td s, при перетаскивании tr он сжимает содержимое.

Например; если моя строка таблицы составляет 500px, когда я начинаю перетаскивать, она становится 300px. Я предполагаю, что это происходит, потому что ширина не определена в сетке. Это потому, что я использую два класса для td s (fix и liquid).

Класс fix делает td равным ширине содержимого, а liquid делает ширину td 100%. Это мой подход к таблице сетки без необходимости присваивать ширину td s.

Есть идеи, как сделать сортируемую работу с моим подходом?

Ответы [ 9 ]

251 голосов
/ 03 сентября 2009

Я нашел ответ здесь .

Я немного изменил его, чтобы клонировать строку вместо добавления ширины к оригиналу:

  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;
  },
159 голосов
/ 27 февраля 2015

Я думаю, что это может помочь:

.ui-sortable-helper {
    display: table;
}
28 голосов
/ 22 мая 2013

Выбранный здесь ответ является действительно хорошим решением, но в нем есть одна серьезная ошибка, которая проявляется в оригинальной скрипке JS (http://jsfiddle.net/bgrins/tzYbU/):, попробуйте перетащить самый длинный ряд ( Да благословит вас Бог, мистер Розуотер ), а остальные ширины ячеек сворачиваются.

Это означает, что фиксации ширины ячейки на перетаскиваемой ячейке недостаточно - вам также необходимо зафиксировать ширину на столе.

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

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

JS Fiddle: 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();

JS Fiddle: http://jsfiddle.net/rp4fV/4/

6 голосов
/ 20 сентября 2012

Кажется, что клонирование строки не работает на IE8, но оригинальное решение делает.

Протестировано с jsFiddle .

4 голосов
/ 24 мая 2013

Назовите этот следующий код, когда ваша таблица готова к сортировке, это обеспечит исправление ваших элементов td без нарушения структуры таблицы.

 $(".tableToSort td").each(function () {
            $(this).css("width", $(this).width());
        });  
0 голосов
/ 21 января 2015

Кажется, что disableSelection() - метод плохой и устарел в наши дни. Я не могу больше использовать ввод текста внутри сортируемой строки в Mozilla Firefox 35.0. Это просто больше не сфокусировано.

0 голосов
/ 07 января 2015

Ответ Дэйва Джеймса Миллера сработал для меня, но из-за расположения контейнерных элементов на моей странице помощник, который перетаскивает курсор мыши, смещен относительно положения моей мыши. Чтобы это исправить, я добавил следующее к вспомогательному обратному вызову

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

Я бы добавил это в качестве комментария к ответу Дэйва, но мне не хватило представителя на этот счет.

0 голосов
/ 17 ноября 2014

Решение Кейта прекрасно, но в Firefox возникло небольшое разрушение, которое не суммировало colspans, а приняло их решение. (Старая строковая боль в колене)

замена этой строки:

 cellCount += colspan;

с:

 cellCount += colspan-0;

Исправляет проблему. (Поскольку js вынужден рассматривать переменные как числа вместо строк)

0 голосов
/ 03 декабря 2013

Примените сортируемую информацию к элементу tbody таблицы и просто установите для помощника значение 'clone', как описано в API jquery-ui

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