如何使用复杂对象设置setRowdata

时间：2019-02-06 12:46:42

标签： ag-grid

我有这个columndefs enter image description here

但是数据源是这个数组。 enter image description here

所以我只能在网格中看到projectId和projectName。 enter image description here

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

1 个答案:

答案 0 :(得分：1)

为了能够通过ag-Grid API的setRowData方法设置数据，必须确保任何一个数据输入在其他数据之间都是一致的。

您可以尝试考虑以下解决方法。

  1. 后端数据转换
    如果您完全可以控制后端API，则可能会以最适合您的方式将数据直接发送回客户端。

  2. 从setRowData分离设置数据的过程
    您可能想通过数据网格为组件引入一些其他方法，例如一个用于设置projectId和projectName，另一个用于设置calendarValues。 ag-Grid docs提供了多达4种不同的数据更新方式。

  3. 为每列定义自定义valueGetter
    您可以尝试通过引入自定义columnDefs来修改valueGetter的定义，该自定义 const columnDefs = [ { headerName: "Febrero2019", field: "Febrero2019", valueGetter({ data: { calendarValues } }) { return calendarValues['Febrero2019']; } }, ]; 将负责提取适当的值，例如

api.setRowData
  1. 预处理来自API的数据
    在您的情况下，您可以定义一个小的辅助函数，该函数将处理将API中的原始数据转换为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 }), {}) }); 方法可接受的数据格式的过程。
processData

所以调用{ Febrero2019: 0 Marzo2019: 0 projectId: "SomeId" projectName: "SomeName" } 将产生所需的数据格式。

{{1}}
相关问题
最新问题