jQuery UI: sortable('toArray') returns an empty array

问题

This has me stumped. The follow code returns ",,,,,,":

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

Why?! It's driving me insane! Any suggestions?

回答1:

.sortable('toArray') serializes items Ids into array, and your items have no Ids, that's why you have empty strings.

回答2:

You can define which attribute to fetch like this:

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

回答3:

I was having this issue as well except i did have id's on my elements, jQuery's sortable('toArray') was very hit an miss on return the ids, however you can grab them in javascript using this:

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

This of course returns the ID's in a comma delimited string but you can return the array. I'm sure there's a better way to solve this problem, this is just the solution i found.

回答4:

I see a few purely javascript answers. They work but beware, they may not return the items in the order that is visible on the screen. Using the code below, see jtsalva above, will return the items in the proper sorted order. This had me stumped for a while because I wanted to save the new order to a database, so I could reload the grid where someone left off.

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

回答5:

To use another attribute you can do this:

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

This will make it so it now uses the attribute 'value' from your code.

Documentation on Sortable toArray method

回答6:

If serialize returns an empty string, make sure the id attributes include an underscore. They must be in the form: "set_number" For example, a 3 element list with id attributes "foo_1", "foo_5", "foo_2" will serialize to "foo[]=1&foo[]=5&foo[]=2". You can use an underscore, equal sign or hyphen to separate the set and number. For example "foo=1", "foo-1", and "foo_1" all serialize to "foo[]=1".

jq sortable reference

回答7:

$('.sortable').sortable('toArray'); will only parse the first element of the class sortable. You can parse all elements by using each:

$('.sortable').each(function(){
    result.push($(this).sortable('toArray'));
})

来源：https://stackoverflow.com/questions/1663012/jquery-ui-sortabletoarray-returns-an-empty-array

标签

jquery-ui

jquery-ui-sortable

iqueryable.toarray