嗨，我試圖建立一個帶有父子資料的表格，可以通過使用jquery sortable庫進行排序，我能夠獲得資料的位置和各自的id，但無法使用jquery將其發送到控制器
。HTML部分：
<tbody span class="hljs-keyword">class="sort">
@foreach($menus as$menu)
<tr id = "{{ $menu-> id }}" class="parent">
<td>{{$menu->name}}</td>
<td>{{$menu->link }}</td>
@if($menu->sub ==1)
<td>Active</td>
否則
<td>In-Active</td>
@endif
<td class="text-right" >
<a href="{{ route("menu. edit", $menu-> id) }}" class="btn btn-primary" data-toggle="tooltip" data- placement="top" title="" data-original-title="Edit"> <i class="fe-edit-2" >< /i></a>
<button data-toggle="tooltip" data-placement="top" data-id="{{$menu-> id}}" title="" data-original-title="Delete" class="delete btn btn-danger ml-1 " type="submit" > <i class="fas fa-trash-alt"></i></button>
</td>
@if(count(AppMenu::where('parent_id',$menu->id)->orderBy('position','asc')->get()) >0)
@foreach(AppMenu::where('parent_id',$menu->id)->orderBy('position', 'asc')->get() as $child)
<tr id="{{ $child->id }}">
<td>~{{$child->name}}</td>
<td>{{$child->link }}</td>
<td></td>
<td class="text-right" >
<a href="{{路由("選單。 edit", $child-> id) }}" class="btn btn-primary" data-toggle="tooltip" data- placement="top" title="" data-original-title="Edit"> <i class="fe-edit-2" >< /i></a>
<button data-toggle="tooltip" data-placement="top" data-id="{{$child-> id}}" title="" data-original-title="Delete" class="delete btn btn-danger ml-1 " type="submit" > <i class="fas fa-trash-alt"></i></button>
</td>
</tr>
@endforeach
@endif
</tr>
@endforeach
</tbody>
Jquery部分:
$(document).ready(function(/span>){
$('.sort').sortable({
stop:function(event, ui) {
var parameter = new Array()。
var position = new Array();
$('.sort>tr').each(function(){
parameter.push($(this).attr("id") )。
});
$(this).children().each(function(index) {
position.push（index 1）。
});
$.ajax({
url:"{{ route('menu.savePosition') }}",
方法:"POST"。
data:{"id":引數，"position":位置}。
success:function（response）{
console.log(response)。
},
error:function(xhr,response){ console.log(response)
console.log(xhr.status)。
}
});
},
}).disableSelection()。
});
控制器部分:
public function SavePosition(Request $req) {
$position = ($req-> all())。
return $req->all（）。
// foreach($file as $pos){
//$id = $pos[1];.
//$position = $pos[0];
//$menu = Menu::findOrFail($id);
//$menu->position = $position;
// $menu-> save();
// }
在這一切之后，控制臺看起來像下面這樣。
請幫助我解決這個問題
。如果有任何幫助，我們將不勝感激
。預先感謝
uj5u.com熱心網友回復：
請看下面的例子。
。$(function() {
$(".sort"/span>).sortable({
items: "> tbody > tr"。
stop: function(event, ui) {
var parameter = $(this).sortable("toArray") 。
var position = [];
$.each(引數, 功能(索引, 值) {
position.push（index 1）。
});
console.log（引數，位置）。
$.ajax({{}})
url: "{{ route('menu.savePosition') }}"。
method: "POST"。
data: {
"id": 引數。
"position": position
},
success: function(response) {
console.log（ response）。
},
error: function(xhr, status, error) {
console.log（status, error）。
}
});
}
});
});< link rel="styleheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous">
<link rel="styleheet" href="/code. jquery.com/ui/1.12.1/themes/base/jquery-ui.css">/span>
<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>
<div class="container">/span>
< table class="sort" width="340">
<thead>
<tr>/span>
<th>名稱</th>/span>
<th>Link</th>/span>
<th>/span>Status</th>
<td></td>
</tr>/span>
</thead>/span>
<tbody>/span>
<tr id="item-1">
<td>Item 1</td>
<td>鏈接 1</td>/span>
<td>Active</td>
<td class="text-right">
<a href="menu_edit.asp? id=item-1" class="btn btn-primary" data-toggle="tooltip" data- placement="top" title="" data-original-title="Edit"> <i class="fe-edit-2" > </i></a>
< button data-toggle="tooltip"/span> data- place="top" data-id="item-1" title="" data-original-title="Delete" " data-original-title="洗掉" class="delete btn btn-danger ml-1" type="submit"> <i class="fas fa-trash-alt"/span>> </i></button>
</td>/span>
</tr>/span>
<tr id="item-2">
<td>Item 2</td>
<td>鏈接 2</td>/span>
<td>Active</td>
<td class="text-right">
<a href="menu_edit.asp? id=item-2" class="btn btn-primary" data-toggle="tooltip" data- placement="top" title="" data-original-title="Edit">>。 <i class="fe-edit-2" > </i></a>
< button data-toggle="tooltip"/span> data- place="top" data-id="item-2" title="" data-original-title="Delete" " data-original-title="洗掉" class="delete btn btn-danger ml-1" type="submit"> <i class="fas fa-trash-alt"/span>> </i></button>
</td>/span>
</tr>/span>
<tr id="item-3">
<td>Item 3</td>
<td>鏈接 3</td>/span>
<td>Active</td>
<td class="text-right">
<a href="menu_edit.asp? id=item-3" class="btn btn-primary" data-toggle="tooltip" data- placement="top" title="" data-original-title="Edit">>。 <i class="fe-edit-2" > </i></a>
< button data-toggle="tooltip"/span> data- place="top" data-id="item-3" title="" data-original-title="Delete" " data-original-title="洗掉" class="delete btn btn-danger ml-1" type="submit"> <i class="fas fa-trash-alt"/span>> </i></button>
</td>/span>
</tr>/span>
<tr id="item-4">
<td>Item 4</td>
<td>鏈接 4</td>/span>
<td>Active</td>
<td class="text-right">
<a href="menu_edit.asp? id=item-4" class="btn btn-primary" data-toggle="tooltip" data- placement="top" title="" data-original-title="Edit">>。 <i class="fe-edit-2" > </i></a>
< button data-toggle="tooltip"/span> data- place="top" data-id="item-4" title=" data-original-title="Delete" data-original-title="洗掉" class="delete btn btn-danger ml-1" type="submit"> <i class="fas fa-trash-alt"/span>> </i></button>
</td>/span>
</tr>/span>
<tr id="item-5">
<td>Item 5</td>
<td>鏈接 5</td>/span>
<td>Active</td>
<td class="text-right">
<a href="menu_edit.asp? id=item-5" class="btn btn-primary" data-toggle="tooltip" data- placement="top" title="" data-original-title="Edit">>。 <i class="fe-edit-2" > </i></a>
< button data-toggle="tooltip"/span> data- place="top" data-id="item-5" title=" data-original-title="delete" class="delete btn btn-danger ml-1" type="submit"> <i class="fas fa-trash-alt"/span>> </i></button>
</td>/span>
</tr>/span>
</tbody>/span>
</table>/span>
</div>/span>不清楚你為什么要發送位置，因為專案的陣列已經會按照專案的順序排列。我包含了它，只是為了防止你在其他方面需要它。
使用toArray方法會更簡單。https://api.jqueryui.com/sortable/#method-toArray 你還需要正確定義items，以便Sortable知道專案應該是什么。
uj5u.com熱心網友回復：
試試這個方法。
$('#element'/span>).sortable({
軸。'y',
更新。function（event, ui）{
var data = $(this).sortable（'serialize'）。
//使用$.post或$.ajax向服務器發送郵件。
$.ajax({
data: 資料。
型別。'POST'。
網址。'/your/url/here'。
});
}
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/319936.html
標籤：
上一篇：在一個頁面上激活多個功能模式