如何在AG-Grid中展示日期为键、对象数组为值的复杂键值对并支持amt排序

实现思路 #

AG-Grid要求输入的行数据为一维对象数组，因此你需要先将后端返回的「日期为键、对象数组为值」的Map结构扁平化，再针对amt字段做排序配置即可。

步骤1：数据扁平化与预处理 #

假设你从API拿到的原始数据为apiResult，我们把它转成AG-Grid可识别的rowData：

// 模拟API返回的结构：如果后端返回的是JS对象，用Object.entries遍历；如果是真Map对象，用apiResult.entries()遍历
const apiResult = {
  '2019-12-23 00:00:00.0': [
    {id: 1, amt: 100, status: 'new'},
    {id: 2, amt: 50, status: 'done'},
    {id: 3, amt: 30, status: 'pending'}
  ],
  '2019-05-24 00:00:00.0': [
    {id: 4, amt: 80, status: 'new'}
  ]
}

// 扁平化处理
let rowData = [];
Object.entries(apiResult).forEach(([dateStr, itemList]) => {
  itemList.forEach(item => {
    // 把日期键合并到每个行对象中
    rowData.push({
      date: dateStr,
      id: item.id,
      amt: item.amt,
      status: item.status
    })
  })
})

// 按amt降序排序，和你预期的默认展示顺序完全匹配
rowData = rowData.sort((a,b) => b.amt - a.amt)

步骤2：AG-Grid列配置 #

在组件中定义列定义，开启amt字段的排序能力：

// 列定义
public columnDefs = [
  { field: 'date', headerName: '日期', width: 220 },
  { field: 'id', headerName: 'ID', width: 80 },
  { field: 'amt', headerName: '金额', width: 100, 
    sortable: true,
    // 显式指定数字排序，避免被识别为字符串排序
    comparator: (a,b) => a - b
  },
  { field: 'status', headerName: '状态', width: 120 }
];

// 全局列默认配置，可统一开启所有列的排序、筛选能力
public defaultColDef = {
  sortable: true,
  filter: true
};

public rowData: any[] = [];

步骤3：组件模板绑定 #

在HTML中引入AG-Grid组件，绑定配置和处理好的rowData：

<ag-grid-angular
  style="width: 100%; height: 500px;"
  class="ag-theme-alpine"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  [defaultColDef]="defaultColDef"
>
</ag-grid-angular>

如果需要支持用户自定义排序方向，点击amt列的表头即可切换升序/降序，无需额外编码。

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