我刚刚在Laravel项目中实现了SortableJS,并希望重新排列某些元素的顺序。我有一个“块”列表,所有这些都有一个“ Order”数据库字段,它是一个整数。我将根据“订单”字段的值以降序显示这些块。
现在,我想使用Ajax使用SortableJS更新这些值。我该怎么做?
目前,我有一个简单的列表
<div class="block-order-list">
@foreach($blocks as $block)
<div class="list-group-item"><i class="far fa-arrows handle mr-3"></i> {{$block->name}}</div>
@endforeach
</div>
并像这样调用Ajax请求:
$('.block-order-list').sortable({
animation: 150,
handle: '.handle',
store: {
set: function (sortable) {
let order = sortable.toArray();
console.log(order);
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: '{{ route('change_order', ['url', $page->url]) }}',
type: 'POST',
data: order,
success: function(data){
console.log(data)
}
})
}
}
});
到我的PageController,其中包含
public function changeOrder($data)
{
return $data;
}
该请求现在仅返回一个说url
的字符串,我觉得很奇怪。在ajax请求的url中,我提供了一个称为URL的参数,我需要找到该特定页面上附加的块。我的图块数据库表如下所示
我该如何完成?
我想您必须在HTML列表中使用ID:
<div class="block-order-list">
@foreach($blocks as $block)
<div class="list-group-item" data-id="{{ $block->id }}>
<i class="far fa-arrows handle mr-3"></i> {{ $block->name }}
</div>
@endforeach
</div>
然后在您的JS中,建立一个ID => order的数组:
let order = {};
$('.list-group-item').each(function() {
order[$(this).data('id')] = $(this).index();
});
然后在您的ajax调用中:
$.ajax({
url: '{{ route('change_order', ['url', $page->url]) }}',
type: 'POST',
data: {order: order},
success: function(data){
console.log(data)
}
})
并且在您的控制器中:
public function changeOrder(Request $request)
{
foreach($request->get('order') as $id => $order) {
Block::find($id)->update(['order' => $order]);
}
}