jQuery UI Sortable，然后将订单写入数据库

我想使用jQuery UI sortable函数允许用户设置订单，然后在更改时将其写入数据库并进行更新。有人可以写一个例子来说明如何做到吗？

jQuery UI sortable功能包括执行此操作的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'
        });
    }
});

这是通过使用elements创建元素数组的id。因此，我通常会执行以下操作：

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

当您使用的serialize选项，它会创建一个POST查询字符串是这样的：item[]=1&item[]=2- -例如，如果你使用等，所以在你的数据库ID id属性，所以可以只通过迭代张贴阵列并相应地更新元素的位置。

例如，在PHP中：

$i = 0;

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

jsFiddle上的示例。

认为这可能也会有所帮助。A）旨在将每次排序后将有效载荷保持在最小水平，同时将其发送回服务器。（而不是每次发送所有元素或遍历服务器可能会剔除的许多元素）B）我需要发回自定义ID而不损害元素的ID /名称。这段代码将从asp.net服务器获取列表，然后在排序时仅发回2个值：已排序元素的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>

您很幸运，我在CMS中使用了确切的内容

当您要存储订单时，只需调用JavaScript方法saveOrder()。它将POST向saveorder.php 发出AJAX 请求，但是您当然可以始终以常规形式发布它。

<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中；请记住，我删除了所有验证和检查。

<?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});
    }
});

我可以按照jsFiddle上可接受的答案和相关示例来更改行。但是由于一些未知的原因，我在执行“停止或更改”操作后无法获得ID。但是在JQuery UI页面上发布的示例对我来说很好用。您可以在此处检查该链接。

尝试以下解决方案：http : //phppot.com/php/sorting-mysql-row-order-using-jquery/ ，其中新订单保存在某些HMTL元素中。然后，将包含此数据的表单提交到某些PHP脚本，并使用for循环对其进行遍历。

注意：我必须添加另一个INT（11）类型的db字段，该字段在每次迭代时都会被更新（带有时间戳）-它用于脚本以了解最近更新的行，否则您将获得混乱的结果。