我想使用jQuery UI sortable函数允许用户设置订单,然后在更改时将其写入数据库并进行更新。有人可以写一个例子来说明如何做到吗?
sortable
jQuery UI sortable功能包括执行此操作的serialize方法。确实很简单。这是一个简单的示例,一旦元素的位置发生变化,该数据便立即将数据发送到指定的URL。
serialize
$('#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' }); } });
这是通过使用elements创建元素数组的id。因此,我通常会执行以下操作:
id
<ul id="sortable"> <li id="item-1"></li> <li id="item-2"></li> ... </ul>
使用该serialize选项时,它将创建一个POST查询字符串,如下所示:item[]=1&item[]=2等等。因此,如果您使用-例如- id属性中的数据库ID,则可以简单地遍历POSTed数组并相应地更新元素的位置。
item[]=1&item[]=2
例如,在PHP中:
$i = 0; foreach ($_POST['item'] as $value) { // Execute statement: // UPDATE [Table] SET [Position] = $i WHERE [EntityId] = $value $i++; }
jsFiddle上的示例。