基于响应数据日期项创建Kendo Grid动态列的技术问询

我完全懂你现在的处境——想基于接口返回的日期字段生成Kendo Grid的动态列，但官方文档里那种要求后端返回列配置的方案，跟你用GridOption封装器的场景完全不搭对吧？别着急，我给你一套适配你场景的解决方案，核心思路是前端从响应数据里提取日期维度，转换数据结构后再绑定到Grid。

解决方案核心思路 #

1. 从原始响应数据中提取所有唯一的日期值，作为动态列的列名
2. 将原始的“按日期分行”的数据结构，转换为“按主体（比如产品、用户）分行，日期作为列”的结构
3. 基于GridOption，动态生成列配置和数据模型字段，完成Grid初始化

具体实现代码 #

假设你的原始响应数据结构类似这样（模拟示例）：

// 示例原始接口返回数据
const rawResponseData = [
  { entityId: 1, entityName: "Entity 1", date: "2024-05-01", metricValue: 85 },
  { entityId: 1, entityName: "Entity 1", date: "2024-05-02", metricValue: 92 },
  { entityId: 2, entityName: "Entity 2", date: "2024-05-01", metricValue: 78 },
  { entityId: 2, entityName: "Entity 2", date: "2024-05-03", metricValue: 88 }
];

步骤1：提取唯一日期并排序 #

先从数据里拿到所有不重复的日期，按时间顺序排序：

// 提取所有唯一日期并排序
const uniqueDates = [...new Set(rawResponseData.map(item => item.date))].sort((a, b) => new Date(a) - new Date(b));

步骤2：转换数据结构为Grid适配格式 #

把原始的“每行对应一个日期的一条数据”，转换成“每行对应一个主体，每个日期作为列存对应数值”的结构：

// 转换数据结构
const gridReadyData = rawResponseData.reduce((acc, item) => {
  // 查找当前主体是否已存在于结果数组中
  const existingRow = acc.find(row => row.entityId === item.entityId);
  if (existingRow) {
    // 已存在则添加对应日期的数值
    existingRow[item.date] = item.metricValue;
  } else {
    // 不存在则新建一行，包含固定字段和当前日期的数值
    acc.push({
      entityId: item.entityId,
      entityName: item.entityName,
      [item.date]: item.metricValue
    });
  }
  // 处理缺失的日期值（可选，比如给没有数据的日期设为0）
  uniqueDates.forEach(date => {
    if (acc[acc.length - 1] && acc[acc.length - 1][date] === undefined) {
      acc[acc.length - 1][date] = 0;
    }
  });
  return acc;
}, []);

步骤3：基于GridOption配置动态列 #

把固定列和动态生成的日期列整合到GridOption中：

// 构建Grid配置项（适配你的GridOption封装器）
const gridOptions = {
  dataSource: {
    data: gridReadyData,
    schema: {
      model: {
        fields: {
          // 固定字段的模型配置
          entityId: { type: "number" },
          entityName: { type: "string" },
          // 动态添加日期字段的模型配置
          ...uniqueDates.reduce((fieldConfig, date) => {
            fieldConfig[date] = { type: "number" };
            return fieldConfig;
          }, {})
        }
      }
    }
  },
  columns: [
    // 固定列
    { field: "entityId", title: "ID", width: 80 },
    { field: "entityName", title: "Name", width: 150 },
    // 动态生成日期列
    ...uniqueDates.map(date => ({
      field: date,
      title: new Date(date).toLocaleDateString(), // 可自定义日期显示格式
      format: "{0:n0}", // 数值格式化，根据需求调整
      width: 120,
      attributes: { style: "text-align: right;" }
    }))
  ],
  // 其他Grid配置（根据你的需求添加）
  pageable: true,
  sortable: true,
  resizable: true
};

// 如果你的GridOption是封装类，直接把配置传入初始化方法即可
// 示例：const grid = new YourGridWrapper(gridOptions);

关键细节说明 #

• 数据转换的必要性：Kendo Grid默认是按行绑定数据，所以必须把日期维度从行转成列，才能实现你要的动态列效果
• 缺失值处理：如果某些主体在特定日期没有数据，记得在转换时设置默认值（比如0或null），避免Grid显示空白
• 日期格式化：可以通过toLocaleDateString()或第三方库把原始日期字符串转成更友好的显示格式
• 数据类型配置：在schema.model.fields里给动态日期列指定类型（比如number），能保证Grid的排序、筛选等功能正常工作

适配GridOption封装器的注意点 #

如果你的GridOption是团队封装的自定义类，只需要把以下两部分动态生成的内容整合到封装器的对应配置中：

• 动态列数组：uniqueDates.map(...)生成的列配置，添加到封装器的列集合里
• 动态字段配置：uniqueDates.reduce(...)生成的字段类型，添加到封装器的数据源模型字段中

内容的提问来源于stack exchange，提问作者O. Khan