如何在Angular 4+中用TypeScript实现透视表风格的Kendo Grid动态列

我来帮你梳理一下如何实现透视表样式的Kendo Grid，核心思路是先把原始的扁平数据转换成透视结构，再动态生成对应的列配置，下面是具体步骤和代码示例：

1. 明确透视表的数据结构 #

透视表通常需要行维度、列维度和值字段。比如你有这样的原始数据：

// 原始数据模型
interface RawSalesData {
  category: string; // 行维度：商品分类
  year: number;     // 列维度：年份
  sales: number;    // 值字段：销售额
}

// 示例数据
const rawData: RawSalesData[] = [
  { category: 'Electronics', year: 2023, sales: 1500 },
  { category: 'Electronics', year: 2024, sales: 2000 },
  { category: 'Clothing', year: 2023, sales: 800 },
  { category: 'Clothing', year: 2024, sales: 1200 },
  { category: 'Home Goods', year: 2023, sales: 900 },
];

我们需要把它转换成透视后的行结构，让列维度（年份）变成对象的动态属性：

// 透视后的数据模型
interface PivotSalesRow {
  category: string;
  [yearKey: string]: number | string; // 动态属性：年份作为key，销售额作为值
}

2. 编写数据转换函数 #

写一个工具函数，把原始扁平数据转换成透视结构：

transformToPivot(rawData: RawSalesData[]): PivotSalesRow[] {
  // 提取所有唯一的列维度值（这里是年份）
  const uniqueYears = [...new Set(rawData.map(item => item.year))].sort();
  
  // 按行维度（分类）分组，构建透视行
  const groupedData = rawData.reduce((acc, item) => {
    const category = item.category;
    // 如果该分类还没初始化，先创建基础行并填充默认值
    if (!acc[category]) {
      acc[category] = { category };
      uniqueYears.forEach(year => {
        acc[category][year.toString()] = 0; // 无数据时默认填0
      });
    }
    // 累加对应年份的销售额
    acc[category][item.year.toString()] += item.sales;
    return acc;
  }, {} as Record<string, PivotSalesRow>);
  
  // 把分组对象转成数组返回
  return Object.values(groupedData);
}

3. 动态生成Kendo Grid列配置 #

拿到透视后的数据，我们可以手动构建Grid的列数组，或者结合自动生成列的方式调整配置：

方式一：手动构建列数组（推荐，更可控） #

在组件里生成列配置，包含固定的行维度列和动态的列维度列：

import { Component, OnInit } from '@angular/core';
import { ColumnSettings } from '@progress/kendo-angular-grid';

@Component({
  selector: 'app-pivot-grid',
  template: `
    <kendo-grid 
      [data]="pivotData" 
      [columns]="gridColumns"
      [height]="400"
    >
    </kendo-grid>
  `
})
export class PivotGridComponent implements OnInit {
  rawData: RawSalesData[] = [/* 你的原始数据 */];
  pivotData: PivotSalesRow[] = [];
  gridColumns: ColumnSettings[] = [];

  ngOnInit(): void {
    this.pivotData = this.transformToPivot(this.rawData);
    this.buildGridColumns();
  }

  private buildGridColumns(): void {
    // 固定列：行维度（分类）
    const fixedColumns: ColumnSettings[] = [
      { field: 'category', title: 'Product Category', width: 180 }
    ];
    
    // 动态列：列维度（年份）
    const dynamicColumns = Object.keys(this.pivotData[0])
      .filter(key => key !== 'category')
      .map(year => ({
        field: year,
        title: `Sales ${year}`,
        width: 150,
        format: '{0:c}', // 格式化货币展示
        textAlign: 'right'
      } as ColumnSettings));
    
    this.gridColumns = [...fixedColumns, ...dynamicColumns];
  }

  // 上面的transformToPivot函数放在这里
  private transformToPivot(rawData: RawSalesData[]): PivotSalesRow[] {
    // ...实现代码
  }
}

方式二：结合自动生成列调整配置 #

如果你想利用Kendo的自动生成列特性，可以通过columnGenerated事件来动态调整列的标题、格式等：

<kendo-grid 
  [data]="pivotData" 
  autoGenerateColumns="true"
  (columnGenerated)="onColumnGenerated($event)"
  [height]="400"
>
</kendo-grid>

组件里添加事件处理：

onColumnGenerated(e: { column: ColumnSettings }): void {
  if (e.column.field === 'category') {
    e.column.title = 'Product Category';
    e.column.width = 180;
  } else {
    e.column.title = `Sales ${e.column.field}`;
    e.column.format = '{0:c}';
    e.column.width = 150;
    e.column.textAlign = 'right';
  }
}

4. 扩展与注意事项 #

• 多维度透视：如果需要更复杂的透视（比如同时按年份和季度分组），可以修改transformToPivot函数，生成类似2023Q1这样的复合列key。
• 数据更新：如果原始数据有新增或修改，需要重新调用transformToPivot和buildGridColumns来更新透视数据和列配置。
• 空值处理：可以根据需求把默认的0改成null或空字符串，配合Kendo Grid的空值模板展示。
• 交互功能：动态列同样支持Kendo Grid的排序、过滤、编辑等功能，只需要在列配置里添加对应的属性即可。

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