jQuery UI の並べ替え可能な変更をデータベースに保存するにはどうすればよいですか?

jQuery UI の並べ替え可能な順序の変更をデータベースに保存する

jQuery UI の並べ替え可能な機能を組み込むと、ユーザーは要素を並べ替えることができます。これらの変更をデータベースに保存するには、次の手順に従います。

1. Sortable を実装する:

   • Sortable スクリプトをwebpage.

2. 順序変更のキャプチャ:

   • 更新イベントを利用して要素の変更をキャプチャします。 order.

3. データのシリアル化:

   • serialize メソッドを使用して、現在の順序を含む配列を取得します。 elements.

4. AJAX リクエスト:

   • シリアル化されたデータを次のように使用して、AJAX リクエストをサーバー側スクリプトに送信します。あるパラメータ。

5. データベース更新:

   • サーバー側で、送信されたデータを解析し、それに応じてデータベースを更新します。 。たとえば、配列の順序に基づいて位置列を更新できます。

コード例:

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

    $.ajax({
      data: data,
      type: 'POST',
      url: '/your/url/here'
    });
  }
});

実装の詳細:

• 要素の位置が変更されると、更新イベントがトリガーされ、新しい注文が配列としてキャプチャされます。
• serialize メソッドは注文をクエリ文字列パラメーターに変換し、AJAX 経由でサーバー側のスクリプトに簡単に渡すことができます。 request.
• サーバー側スクリプト (PHP など) は、配列要素を繰り返し処理し、新しい要素でデータベースを更新できます。位置。

サーバーサイド スクリプトの例 (PHP):

$i = 0;

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

以上がjQuery UI の並べ替え可能な変更をデータベースに保存するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。