Ag grid 如何使用复杂对象设置RowData

我有这个专栏

但是数据的来源是这个数组。

所以我只在网格中看到projectId和projectName。

是否可以分配此数组，或者我可以更改他的结构？

---

谢谢

为了能够通过ag Grid API的

setRowData

方法设置数据，您必须确保任何一个数据输入在任何其他数据输入之间是一致的

<>你可以试着用下面的方法来解决这个问题。

后端数据转换
如果您完全控制后端API，则可能会出现这种情况，只需以最适合您的方式将数据直接发送回客户端即可

将设置数据的过程从

setRowData

您可能需要为带有数据网格的组件引入一些附加方法，例如，一种用于设置

projectId

和

projectName

，另一种用于设置

calendarValues

。ag Grid提供多达4种不同的数据更新方式

为每列定义自定义

valueGetter

您可以尝试通过引入自定义的

valueGetter

来修改

columnDefs

的定义，这将负责提取适当的值，例如

预处理来自API的数据
在您的例子中，您可以定义一个小小的helper函数，该函数将处理将原始数据从API转换为

API.setRowData

方法可接受的适当数据格式的过程

因此调用

processData

将生成所需的数据格式

{
  Febrero2019: 0
  Marzo2019: 0
  projectId: "SomeId"
  projectName: "SomeName"
}

const colDefs = [
    { headerName: 'Codigo', field: 'projectId' },
    { headerName: 'Nombre', field: 'projectName' },
    { headerName: 'Febrero2019', field: 'Febrero2019' },
    { headerName: 'Marzo2019', field: 'Marzo2019' }
];

const projectData = {
    calendarValues: [
        { date: 'Febrero2019', value: 0 },
        { date: 'Marzo2019', value: 0 },
    ],
    projectId: 'SomeId',
    projectName: 'SomeName'
};

const processData = ({ projectId, projectName, calendarValues }) => ({
    projectId,
    projectName,
    ...calendarValues.reduce((calendar, { date, value }) => ({ ...calendar, [date]: value }), {})
});

{
  Febrero2019: 0
  Marzo2019: 0
  projectId: "SomeId"
  projectName: "SomeName"
}