EasyUI 可拖動菜單順序持久化：jQuery UI Sortable + Ajax 保存順序

整體架構

前端拖拽排序 → 序列化順序 → Ajax 提交後端 → 數據庫存儲 → 頁面加載時按順序渲染。

前端實現 (jQuery UI Sortable)

<ul id="menuList" class="menu-list">
    <li data-id="1">菜單一</li>
    <li data-id="2">菜單二</li>
    <li data-id="3">菜單三</li>
</ul>

<script>
$(function() {
    $("#menuList").sortable({
        axis: "y",              // 垂直拖拽
        handle: ".drag-handle", // 可選：限制拖拽手柄
        update: function(event, ui) {
            saveOrder();
        }
    });
    $("#menuList").disableSelection();
});

function saveOrder() {
    var order = [];
    $("#menuList li").each(function(index) {
        order.push({
            id: $(this).data("id"),
            sort: index + 1
        });
    });
    $.post("/api/menu/sort", { menus: JSON.stringify(order) })
        .done(function(res) { console.log("保存成功"); })
        .fail(function() { alert("保存失敗，請重試"); });
}
</script>

後端接口設計 (Spring MVC 示例)

@PostMapping("/api/menu/sort")
@ResponseBody
public Result saveMenuOrder(@RequestBody List menus) {
    // 批量更新排序字段
    menuService.batchUpdateSort(menus);
    return Result.success();
}

public class MenuSortDTO {
    private Long id;
    private Integer sort;
    // getter/setter
}

數據庫表結構

CREATE TABLE sys_menu (
    id BIGINT PRIMARY KEY,
    name VARCHAR(50),
    parent_id BIGINT,
    sort INT DEFAULT 0,  -- 排序字段
    url VARCHAR(200),
    perms VARCHAR(100)
);

頁面加載渲染

// 後端查詢
SELECT * FROM sys_menu WHERE parent_id = ? ORDER BY sort ASC

// 前端模板渲染 (藉由模板引擎或 JS)
menus.forEach(function(menu, index) {
    $('#menuList').append(`
${menu.name}
`);
});

關鍵點總結

1. 每個菜單項**必須有唯一 `data-id`** 對應主鍵。
2. 使用 jQuery UI Sortable 或 SortableJS (無依賴) 實現拖拽，EasyUI 自身無原生拖拽排序組件。
3. 順序保存採用**批量更新**，避免 N 次請求。
4. 並發控制：若多用戶同時調整，考慮樂觀鎖（version 字段）或分布式鎖。

參考資源：jQuery.post 文檔、稀土掘金技術社區。