使用JQuery可排序

我是新來的Laravel，我努力使錶行的安排，並保存自己的位置使用JQuery可排序

在我的數據庫中，我有一個表包含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' => '[email protected]', 'as' => 'car.order']);

我想要做的是訂購錶行，並保存在我的數據庫中的順序，但我不知道如何將路線與視圖集成，並使其工作

來源

2017-04-06 AM DEV

使用update jQuery UI可排序，並進行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

來源

2017-04-06 12:16:54

使用JQuery可排序

回答

相關問題