Kendo Grid行展开/折叠背景色恢复问题：处理alt行及多网格场景

针对alt行、多网格默认颜色不同的问题，核心思路是缓存行的原始背景色，而非硬编码恢复值，这样能自动适配各类默认样式。

实现步骤 #

1. 展开详情时缓存原始颜色并设置目标色
   在detailExpand事件中，获取当前主行，将其原始背景色存入元素的data属性，再设置展开后的背景色。

2. 折叠详情时恢复原始颜色
   在detailCollapse事件中，取出之前缓存的原始颜色，恢复行的背景色，最后清除缓存避免冗余数据。

完整示例代码 #

// 初始化第一个带alt行的Grid
$("#grid1").kendoGrid({
    columns: [
        { field: "productName", title: "产品名称" },
        { field: "price", title: "价格" }
    ],
    detailTemplate: "<div>产品详情：#= productName # 单价 #= price # 元</div>",
    detailExpand: function(e) {
        const masterRow = $(e.masterRow);
        // 缓存原始背景色
        const originalBg = masterRow.css("background-color");
        masterRow.data("original-bg", originalBg);
        // 设置展开后的背景色
        masterRow.css("background-color", "#F1E5AC");
    },
    detailCollapse: function(e) {
        const masterRow = $(e.masterRow);
        // 恢复原始背景色
        const originalBg = masterRow.data("original-bg");
        if (originalBg) {
            masterRow.css("background-color", originalBg);
            masterRow.removeData("original-bg");
        }
    },
    dataSource: [
        { productName: "笔记本电脑", price: 5999 },
        { productName: "智能手机", price: 3999 },
        { productName: "平板电脑", price: 2499 }
    ],
    altRows: true
});

// 初始化第二个自定义样式的Grid
$("#grid2").kendoGrid({
    columns: [
        { field: "userName", title: "用户名" },
        { field: "role", title: "角色" }
    ],
    detailTemplate: "<div>用户详情：#= userName # 角色为 #= role #</div>",
    detailExpand: function(e) {
        const masterRow = $(e.masterRow);
        const originalBg = masterRow.css("background-color");
        masterRow.data("original-bg", originalBg);
        masterRow.css("background-color", "#F1E5AC");
    },
    detailCollapse: function(e) {
        const masterRow = $(e.masterRow);
        const originalBg = masterRow.data("original-bg");
        if (originalBg) {
            masterRow.css("background-color", originalBg);
            masterRow.removeData("original-bg");
        }
    },
    dataSource: [
        { userName: "admin", role: "管理员" },
        { userName: "editor", role: "编辑" },
        { userName: "viewer", role: "访客" }
    ],
    altRows: true,
    altRowTemplate: '<tr data-uid="#= uid #" style="background-color: #E8F4F8;"><td>#= userName #</td><td>#= role #</td></tr>'
});

关键优势 #

• 自动适配alt行：无需判断行是否为alt类，直接缓存原始颜色即可恢复默认样式
• 多网格无冲突：每个网格的行操作独立，通过e.masterRow定位当前行，不会互相干扰
• 兼容动态数据：新增行的uid唯一，缓存逻辑对动态加载的行同样生效

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