使用Laravel 4+從jQuery / ajax保存序列化的可排序數據

Question

有一個問題是將ajax可排序列表保存到我的數據庫中的最佳方法。 我正在使用HTML5Sortable和Laravel 4.2框架。 我想要實現的基本最終結果是用戶能夠單擊並拖動列表項並對它們重新排序，這個新訂單將被保存在數據庫中的一個名為“order”的字段中，這樣當它們返回時該頁面稍后將出現新訂單。

我在頁面上有一個章節列表，如下所示：

<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：查找訂單= 2並將順序更改為1的章節

循環2：查找訂單= 1的章節並將其更改為2

這里的問題是在LOOP 2中它找到了LOOP 1的結果而更新了這個......我想......這個問題讓我很困惑......但我99％肯定我的foreach循環控制器是問題，我不確定解決這個問題的最佳方法。

鏈接到此問題的資源：

• 如何在Laravel 4中使用Jquery UI Sortable
• 使用HTML5sortable為AJAX序列化數據

答案！！！

正如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

最常見的解決方案是保存位置和實體ID：

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

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

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

Answer 2

這個問題非常有用，並給出了自我解決方案！ 太棒了！ 謝謝 ！

只是為了我的情況下不使用相同的結構。 這就是我做的：

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

也許這可以幫助別人:)