使用 Laravel 4+ 从 jQuery/ajax 保存序列化的可排序数据

Question

在找出将 ajax 可排序列表保存到我的数据库中的最佳方法时遇到问题。我正在使用HTML5Sortable 和 Laravel 4.2 框架。我试图实现的基本最终结果是用户能够单击并拖动列表项并对它们重新排序，这个新订单将保存在数据库中一个名为“订单”的字段中，以便当他们返回稍后的页面将显示新订单。

我在页面上有一个章节列表，如下所示：

<ul class="sortable">
    @foreach ($chapters as $chapter)
      <li class="ui-state-default" data-order="{{ $chapter->order }}">{{ $chapter->title }}</li>
    @endforeach
</ul>

我可以使用 HTML5Sortable 对它们进行拖放排序，然后序列化这些数据并通过 ajax POST 提交，每次列表重新排序时都会触发，如下所示：

$('.sortable').sortable().bind('sortupdate', function(e, ui) {

    var order = $('ul.sortable li').map(function(){ 
        return $(this).data("order");
    }).get();

    var uuid = "<?php echo$uuid; ?>";

    $.ajax({
        type: "POST",
        url: "api-ch-order",
        dataType: "json",
        data: {order: order, uuid: uuid},
        success: function(order){
          console.log(order)
        }
    });
});

我在 /api-ch-order 的控制器获取数据并保存新订单，如下所示：

if(Request::ajax()){

  $uuid = Input::get('uuid');
  $order = Input::get('order');

  $i = 1;

  foreach($order as $position) {

    $chapter = Chapter::where('book_uuid', $uuid)->where('order', $position)->first();

    $chapter->order = $i;
    $chapter->save();

    $i++;

  }

}

问题

我在使用这种方法时遇到的问题是它在某些情况下不起作用，循环会导致问题。

例如

循环 1：找到 order = 2 的章节并将 order 更改为 1

循环 2：找到 order = 1 的章节并将其更改为 2

这里的问题是，在 LOOP 2 中，它正在查找 LOOP 1 的结果并更新它......我认为......这个问题让我很困惑......但我 99% 确定 foreach我的控制器中的循环是问题所在，我不确定解决此问题的最佳方法。

链接到这个问题的资源：

• How To Use Jquery UI Sortable in Laravel 4
• Serialize data for AJAX using HTML5sortable

答案！！！

正如r4xz所说，答案是使用ID作为常量。

例如

HTML

<ul class="sortable">
    @foreach ($chapters as $chapter)
      <li class="ui-state-default" data-id="{{ $chapter->id }}">{{ $chapter->title }}</li>
    @endforeach
</ul>

JS

$('.sortable').sortable().bind('sortupdate', function(e, ui) {

    var id = $('ul.sortable li').map(function(){ 
        return $(this).data("id");
    }).get();

    var uuid = "<?php echo$uuid; ?>";

    $.ajax({
        type: "POST",
        url: "api-ch-order",
        dataType: "json",
        data: {id: id, uuid: uuid},
        success: function(order){
          console.log(id)
        }
    });
});

PHP 控制器

if(Request::ajax()){

  $uuid = Input::get('uuid');
  $id = Input::get('id');

  $i = 1;

  foreach($id as $val) {

    $chapter = Chapter::where('id', $val)->first();

    $chapter->order = $i;
    $chapter->save();

    $i++;

  }

}

Answer 1

这个问题非常有帮助，并给出了一个自我回答！伟大的 ！谢谢！

仅适用于在我的情况下不使用相同结构的人。 这就是我所做的：

public function myRouteFunction(Request $request)
    foreach($ids as $key => $id) {
        $update = DB::table('mybase')->where('id', $id)->update(['sort_order' => $key]);
    }
}

也许这可以帮助某人:)

Answer 2

最常见的解决方案是保存位置和实体id：

<li data-id="{{ $chapter->id }}" data-order="{{ $chapter->order }}">{{ $chapter->title }}</li>

然后在控制器中你只需使用：

UPDATE chapter SET order = $order WHERE id = $id