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

Question

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

我很难弄清楚这一点(新手警报)，所以如果有人能解释这一点，我会像没有明天一样发出 hi-5。

干杯

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 脚本用“,”分割数字，并一一更新您的表格。

例如

$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 ';

    }
}