Angular AG 网格压缩 JSON

Question

我在 Angualr 2 中使用 AG Grid，我的后端数据不是键值对格式。

AG 网格期望：

*rowData = [{col1: "data1", col2: "data2"},{col1:"data3", col2:"data4"}];*

在我们的例子中，我们从后端获取以下格式的压缩数据

*gridData  = {cols:[col1, col2], rows:[{"data1","data2"},{"data3","data4"}]}*

这迫使我们在 UI 级别将 gridData 转换为 rowData。

有什么解决办法吗？我们无法更新 rest 以提供预期的数据。

Answer 1

您需要使用 valueGetter 参数而不是 field 参数。这里有一个plunker来演示。

假设您不知道从后端接收了多少列，或者您想要一个通用的解决方案，那么您只需要这样做：

this.gridData  = {cols:["col1", "col2"], rows:[["data1","data2"],["data3","data4"]]};
this.columnDefs = [];
this.rowData = this.gridData.rows;
for (var i in this.gridData.cols){
  var scopeOutCurrIndex = i => (params) => params.data[i]
  this.columnDefs.push({
    headerName: this.gridData.cols[i],
    valueGetter: scopeOutCurrIndex(i)
  })
}

如果您确实知道会返回多少列，那么您可以像这样对 columnDef 进行硬编码：

this.columnDefs = [{
    headerName: "col1",
    valueGetter: (params) => params.data[1]
},
{
    headerName: "col2",
    valueGetter: (params) => params.data[2]
},
...
]

Angular AG 网格压缩 JSON

Angular AG Grid Compressed JSON

grid

ag-grid

angular