jQuery UI で行われた変更をデータベースにソート可能に保持するにはどうすればよいですか?

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

jQuery UI 並べ替え可能関数を使用してユーザーが要素を並べ替えられるようにする場合、多くの場合、新しい注文をデータベースに保存することが望ましい。これを実現する方法は次のとおりです。

jQuery UI の並べ替え可能機能は、この目的のためにシリアル化メソッドを提供します。 ID を使用して要素の配列を作成します。たとえば、次のようなリスト:

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

serialize メソッドがトリガーされると、次のような POST クエリ文字列が生成されます:

item[]=1&item[]=2

各要素の ID がデータベースに対応すると仮定します。 ID を使用すると、POST された配列を反復処理して、データベース内の要素の位置を更新できます。

PHP の例を次に示します:

<code class="php">$i = 0;

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

変更時にシリアル化と順序更新を開始するには、この jQuery コードを使用します:

<code class="javascript">$('#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'
    });
  }
});</code>

このコードは、更新された順序で POST リクエストを作成し、指定された URL に送信します。

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