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++;

  }

}

问题

我采用这种方法的问题是它在某些情况下无法工作，循环会导致问题。

e.g。

LOOP 1：查找订单= 2并将订单更改为1

的章节

循环2：查找订单= 1的章节并将其更改为2

这里的问题是在LOOP 2中它找到了LOOP 1的结果而更新了这个......我想...这个问题让我感到困惑......但我99％肯定是foreach我的控制器中的循环是问题，我不确定解决此问题的最佳方法。

链接到此问题的资源：

答案!!!

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

E.g。

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 CONTROLLER

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

也许这可以帮助某人：）

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

2 个答案: