如何使用 JQuery Sortable 排列 table 的 <tr> 个元素

Question

我是 Laravel 的新手，我正在尝试排列 table 行并保存它们的位置

在我的数据库中，我有一个 table Cars 包含属性 id、name、order(int) 属性。

我有 Car 模型和 DataController 包含基本的 crud 函数以及一个用于下订单的函数：

public function orderCars(Request $request){

    $carItemOrder = json_decode($request->input('order'));

    $this->orderItems($carItemOrder);
}

private function orderItems(array $carItems)
{
    foreach ($carItems as $index => $carItem) {
        $item = Car::findOrFail($carItem->id);
        $item->order = $index + 1;
        $item->save();
    }
}

我有我的看法

<div class="panel-body">

                    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
                    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
                    <script>
                        $(function () {
                            $("tbody").sortable();
                            $("tbody").disableSelection();
                        });
                    </script>

                    <table>
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                        </tr>
                        </thead>
                        <tbody>
                        <?php $data = App\Car::all();?>
                        @foreach($data as $car)
                            <tr class="dd">
                                <td>{{$car->id}</td>
                                <td>{{ucfirst($car->name)}}</td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                    </div>

我有路线

Route::post('cars/order', ['uses' => 'DataController@orderCars', 'as' => 'car.order']);

我想做的是订购 table 行并将订单保存在我的数据库中，但我不知道如何将路线与视图集成并使其工作

Answer 1

使用 Jquery UI 的 update 可排序并进行 ajax 调用以将数据保存在数据库中，如：

$('#element').sortable({
    axis: 'y',
    update: function (event, ui) {
        var data = $(this).sortable('serialize');

        // POST to server using $.post or $.ajax
        $.ajax({
            data: data,
            type: 'POST',
            url: '/your/url/here'
        });
    }
});

当您使用序列化选项时，它将创建一个 POST 查询字符串，如下所示：item[]=1&item[]=2 等

Reference

如何使用 JQuery Sortable 排列 table 的 <tr> 个元素

How to arrange <tr> elements of a table using JQuery Sortable

jquery

jquery-ui-sortable

laravel