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>
當觸發序列化方法時,它會產生如下的POST 查詢字串:
item[]=1&item[]=2
假設每個元素的ID 都對應於資料庫ID,您可以迭代POSTed 陣列並更新資料庫中元素的位置。
這是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中文網其他相關文章!