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

Posted 2023-03-14

【中文标题】使用 Laravel 4+ 从 jQuery/ajax 保存序列化的可排序数据

【英文标题】：Saving serialised sortable data from jQuery/ajax using Laravel 4+

【发布时间】：2014-11-29 03:38:36

【问题描述】：

在找出将 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++;

  

【问题讨论】：

我喜欢你在这里给出的例子。我终于得到了可排序的列表进行排序，但它似乎没有发布......我不知道发生了什么。有什么想法吗？

您在 JS 中使用 $.ajax（如上）并将其发布到您的 routes.php 文件中的路由，例如Route::post('api-ch-order', 'SomeController@SomeFunction');然后使用我上面的控制器。这应该工作......

如果在此之后仍然没有运气，然后发布一个新问题并将其链接到我这里，我会看看我是否可以提供帮助:)

谢谢。我很确定我的路线是正确的。如果它是错误的，那么我应该从 Laravel 那里得到一个错误，说路线是错误的，对吗？我经常遇到这些错误，以至于如果我看到错误，我就会知道如何解决问题。无论如何，这是我帖子的链接：***.com/questions/26280943/…

【参考方案1】：

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

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

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

也许这可以帮助某人:)

【参考方案2】：

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

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

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

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

【讨论】：

完美。这正是我最终的结果！将发布完整答案作为对我的问题的编辑。