JQuery UI-сортируемый - не удалось сбросить tr в пустом теле

Question

У меня есть два связанных элемента tbody, позволяющих перетаскивать строки между двумя таблицами.Все работает нормально, пока все строки не будут удалены из любой таблицы.

Когда все строки перетаскиваются в другую таблицу, высота тела уменьшается, что делает невозможным (почти) отбросить строки обратно внутрь.

Есть ли известный обходной путь для этой проблемы?(min-height не работает для элемента tbody)

Заранее большое спасибо.

Answer 1

Что вы можете сделать, это создать строку, которая невидима для «сортируемого» механизма.Вероятно, самый простой способ сделать это с опцией "items".

Допустим, ваш HTML выглядит следующим образом

<tbody class="sortable">
    <tr><td>stuff</td></tr>
    <tr><td>stuff</td></tr>
    <tr><td>stuff</td></tr>
    <tr class="sort-disabled"><td></td></tr>
</tbody>

Тогда в jquery вы можете иметь

$('.sortable').sortable({
    items: ">*:not(.sort-disabled)"
});

Это что-то вроде хака, но я думаю, что если вы поэкспериментируете с этими вариантами (задайте для строки с отключенной сортировкой некоторую высоту в CSS и т. Д.), Вы, вероятно, найдете то, что вам подходит.Вы также можете попытаться иметь строку с отключенной сортировкой, как первую, так и последнюю, так что место в середине - это цель отбрасывания.

Надеюсь, это поможет!

Answer 2

Трудно заставить таблицу esp. чтобы иметь высоту, пока она пуста. Я сделал это следующим образом.

<div class="ui-widget sortablecolumn">
   <table>
   </table>
</div>  

$( '.sortablecolumn').sortable(
{
   connectWith: '.sortablecolumn',
   items: 'table > tbody > *',
   receive: function(ev, ui) {
        ui.item.parent().find('table > tbody').append(ui.item);
   }
});
$( '.sortablecolumn' ).disableSelection();

Ключевыми аспектами являются items селектор и receive обработчик событий, в котором добавленный элемент перемещается в тело таблицы.

Теперь все работает нормально.

Answer 3

Оформление заказа мой пост об этом - вы можете решить эту проблему, прикрепив метод к клику, который добавляет высоту пустым контейнерам:

function sortAndDrag() {

    //show BEFORE sortable starts
     $(".sortableClass").bind('click mousedown', function(){
          $(".sortableClass"").each(function (c) {
                if ($("tbody", this).size() == 0) {
                    $(this).addClass("aClassWhichGivesHeight")
                }
            })
     });

    //enable sortable
    $(".sortableClass").sortable({
        connectWith: ".sortableClass",
        stop: function (a, d) {
            $("tbody").removeClass("aClassWhichGivesHeight");
        }
    });

}

Что-то в этом роде?

Answer 4

У меня тот же вопрос, и мне удалось наполовину решить его следующим образом:

$('table').sortable(
{
    connectWith: 'table',
    items: 'tbody tr'
});

Это позволяет мне перемещать строки в пустую таблицу, и это выглядит нормально, но элемент вставляется после тела вместо него. Я думаю, что ответ Дэнни Роберта будет работать для меня, но мне было бы интересно увидеть решение без взлома.

Answer 5

Я знаю, что этот вопрос был помечен как "отвеченный", но я также хотел добавить другой способ подойти к этому.

Что я делаю, так это проверяю, пуст ли список, если это так, создаю новый элемент строки и внедряю его в тело. Я помещаю сообщение, как "Нет больше предметов" в тд.

Как только элемент будет добавлен в «пустой» список, пустое сообщение будет уничтожено.

Я использую Mootools, отсюда и отсутствие примера кода.

Answer 6

Вот как я решил проблему с невозможностью удалить tr в пустом теле:

$(function() {

    var sort1 = $('#sort1 tbody');
    var sort2 = $('#sort2 tbody');

   sizeCheck(sort1);
   sizeCheck(sort2);

   //Start the jQuery Sortable for Active and Fresh Promo Tables
   $("#sort1 tbody, #sort2 tbody").sortable({

     items: ">*:not(.sort-disabled)",

     deactivate: function(e, ui) {

        sizeCheck(sort1);
        sizeCheck(sort2);

     },
     //Connect tables to pass data
     connectWith: ".contentTable tbody"

   }).disableSelection();

});

//Prevent empty tbody from not allowing items dragged into it

function sizeCheck(item){
    if($(item).height() == 0){
        $(item).append('<tr class="sort-disabled"><td></td></tr>');
    }
}

Answer 7

Простое решение (PURE CSS):

tbody:after {
    content:" ";
    height:30px;
}

Там, где пробел не является стандартным пробелом.Это невидимый пустой символ, подобный следующему: Невидимые символы - ASCII

Работал для меня в FF и Chrome.

Answer 8

* JS 1002 *

$(".sortable").sortable({
    items: 'tbody > tr',
    connectWith: ".sortable"
});

CSS

.sortable {
    background-color: silver;    
    height: 10px;
}

.sortable td { background-color: white; }

HTML

<table class='sortable'>    
    <tbody>
        <tr><td colspan="2" class="drop-row" style="display: none;"></td></tr>
    </tbody>    
</table>

Более подробная информация и даже лучший код на https://devstuffs.wordpress.com/2015/07/31/jquery-ui-sortable-with-connected-tables-and-empty-rows/

Answer 9

я использую:

$(document).ready(function(){
      $( "#sortable1 tbody, #sortable2 tbody" ).sortable({
      connectWith: ".connectedSortable",
      remove: function(event, ui){ if($(this).html().replace(/^\s+/, "") == '') { $(this).html('<tr class="tmp_tr nobr"><td colspan="7">&nbsp;</td></tr>'); }},
      update: function( event, ui ) {$(this).find('.tmp_tr').remove();},
    }).disableSelection();

});