Пользовательский интерфейс jQuery: sortable('toArray') возвращает пустой массив

Это поставило меня в тупик. Следующий код возвращает ",,,,,,":

<script type="text/javascript">
$(function() {
    $('#listB').sortable({
        connectWith: '#listA',
        update: function(event, ui) {
            var result = $(this).sortable('toArray');
            alert(result);
            }
    });
    $('#listA').sortable({
        connectWith: '#listB'
    });
});
</script>

<div id="boxA">
    <ul id="listA" class="myList">
        <li value="1">Item A</li>
        <li value="2">Item B</li>
        <li value="3">Item C</li>
        <li value="4">Item D</li>
        <li value="5">Item E</li>
        <li value="6">Item F</li>
        <li value="7">Item G</li>
    </ul>
</div>

<div id="boxB">
    <ul id="listB" class="myList">
        <li value="1">Item A</li>
        <li value="2">Item B</li>
        <li value="3">Item C</li>
        <li value="4">Item D</li>
        <li value="5">Item E</li>
        <li value="6">Item F</li>
        <li value="7">Item G</li>
    </ul>
</div>

Почему?! Это сводит меня с ума! Какие-либо предложения?


jquery-ui jquery-ui-sortable iqueryable.toarray
person bjork24    schedule 02.11.2009    source источник
comment
Второй ответ — это то, что ищут люди.   -  person Donato    schedule 30.05.2015

Ответы (7)


arrow_upward
45
arrow_downward

.sortable('toArray') сериализует элементы Ids в массив, а ваши элементы не имеют идентификаторов, поэтому вы иметь пустые строки.

person manji    schedule 02.11.2009

arrow_upward
71
arrow_downward

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

var result = $(this).sortable('toArray', {attribute: 'value'});
person Niklaus    schedule 13.03.2013

arrow_upward
4
arrow_downward

Я вижу несколько чисто javascript-ответов. Они работают, но будьте осторожны, они могут возвращать предметы не в том порядке, в котором они видны на экране. Использование приведенного ниже кода (см. выше jtsalva) вернет элементы в правильном порядке сортировки. Это поставило меня в тупик на некоторое время, потому что я хотел сохранить новый заказ в базе данных, чтобы я мог перезагрузить сетку с того места, где кто-то остановился.

var result = $(this).sortable('toArray', {attribute: 'value'});
person Keith Aymar    schedule 17.08.2017

arrow_upward
3
arrow_downward

У меня тоже была эта проблема, за исключением того, что у меня были идентификаторы на моих элементах, сортировка jQuery ('toArray') была очень неудачной при возврате идентификаторов, однако вы можете получить их в javascript, используя это:

function getSortOrder() {
    var children = document.getElementById('sortedElement').childNodes;
    var sort = "";
    for (x in children) {
        sort = sort + children[x].id + ",";
    }
    return sort;
}

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

person Andrew Afternoon-Delight Hayde    schedule 26.04.2012

arrow_upward
1
arrow_downward

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

$('#element').sortable('toArray' {attribute: 'value'})

Это сделает так, что теперь он использует атрибут «значение» из вашего кода.

Документация по методу Sortable toArray

person jtsalva    schedule 24.07.2017

arrow_upward
0
arrow_downward

Если сериализация возвращает пустую строку, убедитесь, что атрибуты id содержат символ подчеркивания. Они должны быть в форме: "set_number". Например, список из 3 элементов с атрибутами id "foo_1", "foo_5", "foo_2" будет сериализован в "foo[]=1&foo[]=5&foo[]=2". Вы можете использовать подчеркивание, знак равенства или дефис, чтобы отделить набор от числа. Например, "foo=1", "foo-1" и "foo_1" сериализуются в "foo[]=1".

справочник по сортировке jq

person Skeletor    schedule 18.08.2016

arrow_upward
0
arrow_downward

$('.sortable').sortable('toArray'); будет анализировать только первый элемент класса sortable. Вы можете проанализировать все элементы, используя each:

$('.sortable').each(function(){
    result.push($(this).sortable('toArray'));
})
person trojan    schedule 20.09.2016