jQuery可排序网格到MySQL数据库PHP

Question

我正在尝试使用以下方式对图像进行排序：http://jqueryui.com/demos/sortable/display-grid.html 然后以某种方式使用PHP将新排序的数组/结果提交到MySQL数据库？

我很难搞清楚这一点（newby alert），所以如果有人能够对此有所了解，我会像喜欢没有明天那样在喜欢的地方放弃。

干杯

Answer 1

特别需要查看将事件附加到可排序的

http://jqueryui.com/demos/sortable/#event-update

并序列化以获取相关内容http://jqueryui.com/demos/sortable/#method-serialize

修改

这是你需要做的原始版本。

<script>
$(function() {

    var arrayOfIds = [];

    $( "#sortable" ).sortable({

          update: function(event, ui) { 
            $.each($(this).sortable('toArray'), function(key, value) {
                arrayOfIds.push(value.replace('el-',''))
            });

            var jqxhr = $.ajax({ 
                url: "order.php?order="+encodeURIComponent(arrayOfIds),

            })
            .success(function(response) { console.log("success"  + response ); })
            .error(function() {  console.log("error"); })
            .complete(function() {  console.log("complete "); });

          }

    });
    $( "#sortable" ).disableSelection();
});
</script>

每个li元素都需要一个你的数据库可以理解的id

<li class="ui-state-default" id="el-1">1</li>

id =“el-1”中的“1”应与数据库表中的id相关。当您重新排序时，更新事件将触发，执行新订单，获取所有ID并将其传递给ajax请求，然后php文件可以获取该请求。然后order.php脚本将数字拆分为“，”并逐个更新你的表。

e.g。

$itemOrders = explode(',',$_POST['order']);

$sizeOfList = sizeof($itemOrders);for($i=0; $i<$sizeOfList; $i++)
{
    $itemId = intval($itemOrders[$i]); 

    $query = "UPDATE your_table_name SET order_no = '".$i."' WHERE id = '".$itemId."' ";
    if ($result = $msHandle->query($query))
    {
        $message = 'success';
    }
        else
    {
        $message =   'fail ';

    }
}

Answer 2

在排序事件上将有一个回调函数，您可以使用该函数将AJAX请求发送到更新数据库的PHP脚本。可以想象它是在您进行排序操作（即移动一个项目）之后，将值（即有序列表）发送到PHP脚本，该脚本获取这些值并更新数据库。我假设你有MySQL的经验，因为你似乎知道问题的基本原理。