web-dev-qa-db-ja.com

jQuery UI：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-uijquery-ui-sortableiqueryable.toarray
23
bjork24

.sortable('toArray') 項目Idsを配列にシリアル化し、項目にIDがないため、空の文字列があります。

40
manji

次のように、フェッチする属性を定義できます。

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

要素にIDがあったことを除いて、この問題も発生していました。jQueryのsortable（ 'toArray'）は、IDを返すときに非常に失敗しましたが、これを使用してJavaScriptで取得できます。

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

もちろん、これはIDをコンマ区切りの文字列で返しますが、配列を返すこともできます。この問題を解決するためのより良い方法があると確信しています。これは私が見つけた解決策です。

3
Andrew Afternoon-Delight Hayde

純粋にJavaScriptの回答がいくつかあります。それらは機能しますが、画面に表示されている順序でアイテムを返さない場合があることに注意してください。以下のコードを使用して、上記のjtsalvaを参照してください。適切なソート順でアイテムが返されます。新しい注文をデータベースに保存したかったのでしばらくの間困惑しました。誰かが中断したところからグリッドをリロードできるようになりました。

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

別の属性を使用するには、次のようにします。

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

これにより、コードの 'value'属性が使用されるようになります。

Sortable toArrayメソッドに関するドキュメント

1
jtsalva

$（ '。sortable'）。sortable（ 'toArray'）;は、クラスの最初の要素のみを解析します- ソート可能。 eachを使用すると、すべての要素を解析できます。

$('.sortable').each(function(){
    result.Push($(this).sortable('toArray'));
})
0
trojan

Serializeが空の文字列を返す場合は、id属性にアンダースコアが含まれていることを確認してください。 「set_number」の形式である必要があります。たとえば、ID属性が「foo_1」、「foo_5」、「foo_2」の3要素リストは、「foo [] = 1＆foo [] = 5＆foo [] = 2」にシリアル化されます。アンダースコア、等号、またはハイフンを使用して、セットと番号を区切ることができます。たとえば、「foo = 1」、「foo-1」、および「foo_1」はすべて「foo [] = 1」にシリアル化されます。

jqソート可能な参照

0
Skeletor