Question

我是Laravel的新手，我正在努力安排表格行并保存他们的位置

在我的数据库中，我有一个包含属性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']);

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

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

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

Reference

如何使用JQuery Sortable排列表的元素

1 个答案: