在Ag-grid中,要读取主/细节(master/detail)中的所有数据,可以通过以下步骤实现:
步骤1:在Ag-grid中定义主/细节列(master-detail columns)。
//定义主列
{
headerName: '主列名',
field: 'fieldName',
/* 其他列属性定义 */
}
//定义细节列
{
headerName: '细节列名',
field: 'fieldName',
/* 其他列属性定义 */
cellRenderer: 'agGroupCellRenderer',
/* 以下为展开细节行的属性定义,此处自行根据需求选择 */
cellRendererParams: {
innerRenderer: function(params) {
return params.data.fieldName;
}
},
/* 其他属性... */
}
步骤2:在数据源(data source)中,定义适当的子集数据(子集数据必须和主数据的行对象一一对应)。
[{/* 主数据 */
fieldName: 'value',
/* 其他数据定义... */
children: [{/* 子集数据一 */
fieldName: 'child1',
/* 其他数据定义... */
},
{/* 子集数据二 */
fieldName: 'child2',
/* 其他数据定义... */
}]
}]
步骤3:在渲染完整行的事件(renderRowEvent)中,通过递归遍历主数据及其子数据来读取所有数据。
onRenderedRow(evt) {
let rowData = evt.node.data;
if (!rowData.children || rowData.children.length === 0) {
console.log(rowData.fieldName); //打印主数据行的值
} else {
rowData.children.forEach(child => {
console.log(child.fieldName); //打印子数据行的值
});
}
}
执行以上步骤后,便可以读取所有主/细节数据。
上一篇:ag-grid-community:如何为网格设置标题?
下一篇:Ag-grid-enterprise: TypeError: details.rootNode.updateHasChildren 不是一个函数