如何在PHP中获取并展示jQuery Sortable菜单排序的数组顺序？

首先，咱们先把前端的AJAX提交代码补全（你的原代码片段不完整），确保能把排序后的页面ID数组正确传给后端：

1. 完善前端jQuery Sortable的AJAX提交 #

假设你的#pages_selection里的每个li都带了data-id属性（值对应Pages表的id），可以用Sortable自带的方法快速获取排序后的ID列表：

$('#pages_selection').sortable({
    items: 'li:not(.empty)',
    connectWith: '#pages_available, #pages_selection',
    placeholder: 'sort-highlight',
    forcePlaceholderSize: true,
    zIndex: 999999,
    update: function(event, ui) {
        // 提取排序后的页面ID数组
        const sortedPageIds = $(this).sortable('toArray', { attribute: 'data-id' });
        
        $.ajax({
            type: 'POST',
            url: "{{ URL::route('menusaveAjax') }}",
            data: {
                '_token': $('input[name=_token]').val(),
                'id_menu': {{ $menu->id }}, // 补全你的菜单ID变量
                'sorted_pages': sortedPageIds // 把排序结果传给后端
            },
            success: function(res) {
                console.log('排序已保存');
                // 这里可以加前端预览逻辑
            },
            error: function(xhr) {
                console.error('保存失败:', xhr.responseText);
            }
        });
    }
});

2. PHP后端接收并处理排序数据 #

在menusaveAjax对应的控制器方法里，接收、验证数据，然后查询出对应排序的slug：

public function menuSaveAjax(Request $request)
{
    // 验证请求合法性
    $request->validate([
        'id_menu' => 'required|integer',
        'sorted_pages' => 'required|array',
        'sorted_pages.*' => 'integer|exists:pages,id' // 确保每个ID都是有效页面ID
    ]);

    $sortedPageIds = $request->input('sorted_pages');
    
    // 按排序顺序查询对应的slug（关键：用FIELD保证结果顺序和排序一致）
    $sortedPages = \DB::table('pages')
        ->whereIn('id', $sortedPageIds)
        ->orderByRaw(\DB::raw("FIELD(id, " . implode(',', $sortedPageIds) . ")"))
        ->get(['id', 'slug']);

    // 可选：把排序顺序保存到数据库（比如菜单表加sort_order字段存逗号分隔的ID）
    // \DB::table('menus')->where('id', $request->id_menu)->update([
    //     'sort_order' => implode(',', $sortedPageIds)
    // ]);

    // 返回排序后的slug数据给前端
    return response()->json([
        'success' => true,
        'sorted_slugs' => $sortedPages->pluck('slug')->toArray()
    ]);
}

3. 展示排序后的slug #

前端实时展示（AJAX成功回调里）

success: function(res) {
    if (res.success) {
        // 渲染到预览容器
        let previewHtml = '<ul class="menu-preview">';
        res.sorted_slugs.forEach(slug => {
            previewHtml += `<li>${slug}</li>`;
        });
        previewHtml += '</ul>';
        $('#menu-preview').html(previewHtml);
    }
}

PHP模板展示已保存的排序

如果之前把排序顺序存在了菜单表的sort_order字段，可在模板里这样渲染：

<?php
$menu = \DB::table('menus')->find($menuId);
$sortedPageIds = explode(',', $menu->sort_order);

$sortedPages = \DB::table('pages')
    ->whereIn('id', $sortedPageIds)
    ->orderByRaw(\DB::raw("FIELD(id, " . implode(',', $sortedPageIds) . ")"))
    ->get();
?>

<ul class="final-menu">
    <?php foreach($sortedPages as $page): ?>
        <li><?= $page->slug ?></li>
    <?php endforeach; ?>
</ul>

注意事项 #

• 一定要验证前端传来的ID数组，避免无效数据或SQL注入风险
• FIELD(id, ...)是保证查询结果顺序和排序一致的关键，因为whereIn不会保留传入数组的顺序
• 如果用Laravel的Eloquent模型，写法可以更简洁，核心逻辑不变

内容的提问来源于stack exchange，提问作者yagrasdemonde