Laravel SortableJS AJAX - 如何重新排列顺序
Laravel SortableJS AJAX - How to rearrange order
我刚刚在我的 Laravel 项目中实现了 SortableJS,想重新排列一些元素的顺序。我有一个 "Blocks" 的列表,它们都有一个 "Order" 的数据库字段,它是一个整数。我根据 "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;
}
请求现在只有 returns 一个字符串 url
我觉得很奇怪。在 ajax 请求的 url 中,我提供了一个名为 URL 的参数,我需要用它来找到附加到该特定页面的块。我的块数据库 table 看起来像这样
我怎样才能做到这一点?
我想您必须在 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]);
}
}
我刚刚在我的 Laravel 项目中实现了 SortableJS,想重新排列一些元素的顺序。我有一个 "Blocks" 的列表,它们都有一个 "Order" 的数据库字段,它是一个整数。我根据 "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;
}
请求现在只有 returns 一个字符串 url
我觉得很奇怪。在 ajax 请求的 url 中,我提供了一个名为 URL 的参数,我需要用它来找到附加到该特定页面的块。我的块数据库 table 看起来像这样
我怎样才能做到这一点?
我想您必须在 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]);
}
}