jQuery UI Sortable の「serialize」メソッドはデータベースの更新にどのように使用できますか?

順序とデータベースの更新を管理するために jQuery UI の並べ替え可能を利用する方法

jQuery UI の並べ替え可能な機能を使用すると、ユーザーは順序を確立および変更できます。要素。このため、これらの変更をデータベースの更新にどのように変換するかという問題が生じました。

解決策:

jQuery UI は、この目的のために貴重なシリアル化メソッドを提供します。それぞれが ID で表される要素の配列を簡単に生成します。

要素の再配置時に指定された URL にデータをディスパッチする包括的な例を次に示します。

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

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

このコードは、並べ替え可能なリストを作成し、要素の位置が変更されたときに更新イベントをトリガーし、ソートされた ID を配列に収集します。

通常、要素には次のものがあります。データベース ID が属性に埋め込まれています。シリアル化関数は、これらの ID を使用して注文をエンコードし、item[]=1&item[]=2 のような POST クエリ文字列を生成します。

PHP ドメインでは、単純なループでこの受信した配列を走査し、データベースの更新を実行できます。それに応じて:

$i = 0;

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

このプロセスの動作を視覚化するには、jsFiddle の例を調べてください。

以上がjQuery UI Sortable の「serialize」メソッドはデータベースの更新にどのように使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。