jQuery UIを使用してデータベースにソート可能な要素の順序を保存する方法?

JQuery UI 並べ替え可能: データベースへの順序の保存

順序付きリストや、調整可能なシーケンスを必要とするその他の要素を操作する場合、jQuery UI並べ替え機能は、シンプルかつ効果的なソリューションを提供します。この機能を使用すると、ユーザーは要素をドラッグ アンド ドロップして順序を決定でき、データベースと統合してこれらの変更を永続的に保存できます。

この機能を実装するために、jQuery UI は Sortable オプション内に Serialize メソッドを提供します。更新された注文を指定された URL に送信する例を次に示します。

$('#element').sortable({
    axis: 'y',
    update: function (event, ui) {
        var data = $(this).sortable('serialize');

        // POST to server using $.post or $.ajax
        $.ajax({
            data: data,
            type: 'POST',
            url: '/your/url/here'
        });
    }
});

このコードは、Sortable のシリアル化メソッドを利用して、ID を使用して要素の配列を作成します。一般的な方法では、並べ替え可能な各要素に一意の ID を割り当てる必要があります。

<ul id="sortable">
   <li id="item-1"></li>
   <li id="item-2"></li>
   ...
</ul>

serialize オプションを使用すると、item[]=1&item[]=2 などの POST クエリ文字列が構築されます。 ID をデータベース ID として使用すると、POST された配列を簡単に反復処理し、それに応じて要素の位置を更新できます。

たとえば、PHP を使用します。

$i = 0;

foreach ($_POST['item'] as $value) {
    // Execute statement:
    // UPDATE [Table] SET [Position] = $i WHERE [EntityId] = $value
    $i++;
}

jQuery を使用した注文管理への柔軟なアプローチUI ソータブルとデータベースの統合により、ユーザーは希望のシーケンスを動的に調整して保存できます。

以上がjQuery UIを使用してデータベースにソート可能な要素の順序を保存する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。