jQuery: один сортируемый список, отображение результатов в другом списке - PullRequest
Новая
       0

jQuery: один сортируемый список, отображение результатов в другом списке

3 голосов
/ 03 ноября 2011

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

Элементы в списке display_only будут содержать поля вводапоэтому в идеале элементы в display_only должны также перемещаться в DOM, но это не является обязательным требованием.

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

Пример HTML: 

<ul id="sortable">
    <li data-id="1">Item 1</li>
    <li data-id="2">Item 2</li>
    <li data-id="3">Item 3</li>
</ul>
<ul id="display_only">
    <li data-id="1">Item 1 and som other content</li>
    <li data-id="2">Item 2 and som other content</li>
    <li data-id="3">Item 3 and som other content</li>
</ul>

Ответы [ 3 ]

6 голосов
/ 31 января 2012

Здесь нет реальной необходимости использовать массивы. Но вы можете легко интегрировать определяющие элементы массива среди этого. 

 $('#sortable').sortable({
        start: function(event, ui){
                iBefore = ui.item.index();
        },
        update: function(event, ui) {
                iAfter = ui.item.index();
                evictee = $('#display_only li:eq('+iAfter+')');
                evictor = $('#display_only li:eq('+iBefore+')');

                evictee.replaceWith(evictor);
                if(iBefore > iAfter)
                    evictor.after(evictee);
                else
                    evictor.before(evictee);
        }
 });

Я уверен, что запись в функцию и передача родительских селекторов в качестве аргументов более удобна.

1 голос
/ 03 ноября 2011

как насчет использования метода $ .fn.clone () для клонирования отсортированного ul и запуска клона каждый раз, когда вы сортируете с 

$('#sortable').bind('sort', function(e,ui){
   $newlist = $(this).clone();

   $('#display_only').remove();   //removing the old list
   $newlist.attr('id','display_only'); // giving the right id for the cloned element
   $(this).append($newlist)

});

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

обратите внимание, что в jquery ui sortable есть куча событий, и вы должны связать подходящее для вас jquery ui sorttable события Я подозреваю, что "стоп",'beforeStop' или 'change' будут правильными

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

$('#sortable').bind('sort', function(e,ui){
   $("#display_only).sortable()

});

простой и элегантный

0 голосов
/ 03 ноября 2011

Через некоторое время, если настроить, я заработал.Я не уверен, что это лучший способ решить эту проблему, но он работает.На остановке я вызываю свою функцию, чтобы изменить порядок элементов в «#display_ only», который перебирает новый порядок и помещает его в массив.

После этого я перебираю свои элементы в «#display_only» иотсоедините их в том же порядке, а затем просто добавьте их в мой список, например: 

function reorder() {
    var newOrder = [];
    $('#sortable li').each(function(i) {
         newOrder.push($(this).attr('data-id'));
    });
    $('#display_only li').each(function(i) {
         var item = $("li[data-id="+newOrder[i]+"]").detach();
         $('#display_only').append(item);
    });
}
...