jQuery UI Sortable，然后将订单写入数据库
我想使用jQuery UI sortable函数来允许用户设置顺序，然后进行更改，将其写入数据库并进行更新。 有人可以写一个关于如何做这个例子吗？
jQuery UI sortablefunction包括一个serialize方法来做到这一点。 这很简单，真的。 下面是一个简单的例子，一旦元素的位置发生变化，就会将数据发送到指定的URL。
$('#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' }); } });
它所做的是使用元素id创build一个元素数组。 所以，我通常做这样的事情：
<ul id="sortable"> <li id="item-1"></li> <li id="item-2"></li> ... </ul>
当你使用serialize选项时，它会创build一个POST查询string，如下所示： item[]=1&item[]=2等等。所以，如果你使用id属性中的数据库ID，那么你可以迭代通过POSTed数组并相应地更新元素的位置。
例如，在PHP中：
$i = 0; foreach ($_POST['item'] as $value) { // Execute statement: // UPDATE [Table] SET [Position] = $i WHERE [EntityId] = $value $i++; }
例如jsFiddle。
你好运，我在我的CMS中使用确切的东西
如果要存储订单，只需调用JavaScript方法saveOrder() 。 它会发出一个AJAX的POST请求saveorder.php，但当然你可以随时发布它作为一个常规的forms。
<script type="text/javascript"> function saveOrder() { var articleorder=""; $("#sortable li").each(function(i) { if (articleorder=='') articleorder = $(this).attr('data-article-id'); else articleorder += "," + $(this).attr('data-article-id'); }); //articleorder now contains a comma separated list of the ID's of the articles in the correct order. $.post('/saveorder.php', { order: articleorder }) .success(function(data) { alert('saved'); }) .error(function(data) { alert('Error: ' + data); }); } </script> <ul id="sortable"> <?php //my way to get all the articles, but you should of course use your own method. $articles = Page::Articles(); foreach($articles as $article) { ?> <li data-article-id='<?=$article->Id()?>'><?=$article->Title()?></li> <? } ?> </ul> <input type='button' value='Save order' onclick='saveOrder();'/>
在saveorder.php; 请记住，我删除了所有的validation和检查。
<?php $orderlist = explode(',', $_POST['order']); foreach ($orderlist as $k=>$order) { echo 'Id for position ' . $k . ' = ' . $order . '<br>'; } ?>
这是我的例子。
https://github.com/luisnicg/jQuery-Sortable-and-PHP
您需要捕获更新事件中的订单
$( "#sortable" ).sortable({ placeholder: "ui-state-highlight", update: function( event, ui ) { var sorted = $( "#sortable" ).sortable( "serialize", { key: "sort" } ); $.post( "form/order.php",{ 'choices[]': sorted}); } });
认为这也可以帮助。 A）它被devise成在每次sorting之后将有效载荷保持在最小值，同时发回服务器。 （而不是每次发送所有元素或迭代服务器可能会查找的许多元素）B）我需要发回自定义的id而不妥协元素的id /名称。 这段代码将从asp.net服务器获取列表，然后在sorting时只返回2个值：sorting后的元素的db id和下一个元素的db id。 基于这两个值，服务器可以很容易地识别新的位置。
<div id="planlist" style="width:1000px"> <ul style="width:1000px"> <li plid="listId1"><a href="#pl-1">List 1</a></li> <li plid="listId2"><a href="#pl-2">List 1</a></li> <li plid="listId3"><a href="#pl-3">List 1</a></li> <li plid="listId4"><a href="#pl-4">List 1</a></li> </ul> <div id="pl-1"></div> <div id="pl-2"></div> <div id="pl-3"></div> <div id="pl-4"></div> </div> <script type="text/javascript" language="javascript"> $(function () { var tabs = $("#planlist").tabs(); tabs.find(".ui-tabs-nav").sortable({ axis: "x", stop: function () { tabs.tabs("refresh"); }, update: function (event, ui) { //db id of the item sorted alert(ui.item.attr('plid')); //db id of the item next to which the dragged item was dropped alert(ui.item.prev().attr('plid')); //make ajax call } }); }); </script>
我可以按照jsFiddle上接受的答案和相关示例来更改行。 但由于原因不明，在“停止或改变”行动之后我无法获得ID。 但是在JQuery UI页面发布的例子对我来说工作得很好。 你可以在这里查看链接。
试试这个解决scheme： http : //phppot.com/php/sorting-mysql-row-order-using-jquery/其中新订单保存在一些HMTL元素。 然后，将这个数据的表单提交给一些PHP脚本，然后用for循环迭代它。
注意：我不得不添加另一个types为INT（11）的数据库字段，它在每次迭代时都会更新（时间戳） – 它用于脚本来知道最近更新了哪一行，否则最终会出现混乱的结果。
