使用Kendo UI jQuery重排表格行后如何将行顺序保存到数据库？

你需要通过新增排序字段、后端提供更新接口、前端同步排序数据三个环节实现顺序持久化，具体操作如下：

1 数据库层改造 #

给存储表格对应业务数据的表新增整数类型字段sort_order，用于记录每行的排序优先级：

• 字段默认非空，初始值可以直接和现有行的默认排序逻辑对齐，比如原表格按主键id升序展示，就把sort_order初始值设为对应行的id值即可。

2 后端接口开发 #

新增一个用于更新排序的接口，可选两种实现逻辑：

• 单条更新：入参接收[行主键id, 新sort_order值]，仅更新被拖拽行的排序字段，适合数据量大的场景
• 批量更新：入参接收全量[{id: 行1id, sort_order: 1}, {id: 行2id, sort_order:2}...]数组，一次性更新所有行的排序字段，适合数据量较小的场景，逻辑更简单不易出现排序冲突

3 前端代码调整 #

3.1 修改Sortable的change事件 #

调整你现有的change事件逻辑，修改数据源后向后端发送排序更新请求，这里以批量更新为例：

// Kendo table sortable
var kendoSortable = grid.table.kendoSortable({
    filter: ">tbody >tr",
    hint: function (element) { // Customize the hint.
        var table = $('<table style="width: 600px;" class="k-grid k-widget"></table>'),
            hint;

        table.append(element.clone()); // Append the dragged element.
        table.css("opacity", 0.7);

        return table; // Return the hint element.
    },
    cursor: "move",
    placeholder: function (element) {
        return $('<tr colspan="4" class="placeholder"></tr>');
    },
    change: function (e) {
        var skip = grid.dataSource.skip(),
            oldIndex = e.oldIndex + skip,
            newIndex = e.newIndex + skip,
            data = grid.dataSource.data(),
            dataItem = grid.dataSource.getByUid(e.item.data("uid"));

        // 前端先更新数据源顺序
        grid.dataSource.remove(dataItem);
        grid.dataSource.insert(newIndex, dataItem);

        // ====== 新增：同步排序到后端 ======
        // 生成全量排序数据，索引+1作为sort_order值
        var sortList = grid.dataSource.data().map((item, index) => {
            return {
                id: item.id, // 替换为你实际的行主键字段名
                sort_order: index + 1
            }
        });
        // 调用后端接口更新
        $.ajax({
            url: "/api/your-update-sort-url", // 替换为你的后端接口地址
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify(sortList),
            success: function(res) {
                // 可选：更新成功提示
            },
            error: function(err) {
                // 可选：更新失败回滚前端排序，避免前后端不一致
                grid.dataSource.remove(dataItem);
                grid.dataSource.insert(oldIndex, dataItem);
                alert("排序保存失败，请重试");
            }
        })
    }
});

3.2 配置数据源默认排序 #

给Kendo Grid的dataSource添加默认排序规则，页面加载时自动按存储的sort_order升序展示：

var grid = $("#grid").kendoGrid({
    // 其他grid配置...
    dataSource: {
        // 其他数据源配置...
        sort: { field: "sort_order", dir: "asc" } // 新增默认按sort_order升序
    }
}).data("kendoGrid");

注意事项 #

• 如果表格数据量大，建议用单条更新逻辑，只修改受影响行的sort_order值，减少接口请求数据量
• 如果拖拽操作比较频繁，可以给接口请求加300ms左右的防抖，避免短时间内多次调用接口
• 分页场景下要注意skip参数的计算准确性，避免跨页拖拽时索引计算错误

内容的提问来源于stack exchange，提问作者Joel John Centeno