我不确定我在这里是否做错了什么,或者文档是否错误或具有误导性。我正在尝试对每行的详细信息面板使用 FullWidthRowCell 功能。然而,它似乎并不完全按照记录工作。由于我最近从 ag-grid 的 v4 跳转到了 v6,我想在对此进行错误报告之前我应该先在这里询问我是否犯了错误。
描述:
我更改了现有的数据网格,以便可能有一个详细信息面板,可以展开以另一种格式显示附加信息。我还想使用一个可以在其他地方重用的 React 组件。目前,面板将打开并仅显示空白区域(面板应在的位置)并产生错误消息。我已在列定义中成功使用“cellRendererFramework”。
文档参考:
部分:全宽行和主细节网格
提供一个 fullWidthCellRenderer,告诉网格要使用什么 cellRenderer
在进行全宽度渲染时使用。
cellRenderer 可以是任何 ag-Grid cellRenderer。参考单元格
渲染如何构建 cellRenderers。 cellRenderer 为
fullWidth 与普通的 cellRenderers 有一个区别,那就是
传递的参数缺少值和列信息,因为
根据定义,cellRenderer 不依赖于特定的列。
相反,您应该处理 data 参数,它代表
整行的值。
部分:反应细胞渲染, 指定 React cellRenderer
同样的机制可以在下面使用 React 组件
地点:
colDef.cellRendererFramework
colDef.floatingCellRendererFramework
gridOptions.fullWidthCellRendererFramework
gridOptions.groupRowRendererFramework
gridOptions.groupRowInnerRendererFramework
gridOptions.fullWidthCellRendererFramework是指定选项!
设置示例:
下面是我的设置的一些重要部分(是的,它省略了 col 定义和我实际版本中的其他内容)。
网格选项(片段):
gridOptions = {
doesDataFlower: (data) => { return true; }
isFullWidthCell: function(rowNode) {
var rowIsNestedRow = rowNode.flower;
return rowIsNestedRow;
},
getRowHeight: function(params) {
var rowIsNestedRow = params.node.flower;
return rowIsNestedRow ? 100 : 25;
},
fullWidthCellRendererFramework: AppointmentDetail
}
我尝试过的一个简单的存根测试组件
class AppointmentDetail extends React.Component<any, any>
{
render() {
return <div>AppointmentDetail</div>
}
}
但是,如果我使用非反应方法
fullWidthCellRenderer: (params) => { return "<div>Test</div>"; }
或者反应组件的旧方法(我认为作者不再打算使用它)
fullWidthCellRenderer: reactCellRendererFactory(AppointmentDetail)
那么整行就会正确呈现。
警告:
ag-Grid: you need to provide a fullWidthCellRenderer if using isFullWidthCell()
该组件确实友好地向我提供了一个错误,告诉我出了什么问题。只是文档似乎表明这应该是有效的。
版本:
以防万一需要......这是我的版本,取自我的 webpack 依赖项。
"ag-grid": "^6.0.1",
"ag-grid-react": "^6.0.1",
"react": "^15.3.2",
Edit(s):
我将 gridProps 编辑为 gridOptions,以更好地说明这些是我为 ag-grid 提供的网格选项。根据要求我完全按照我所说的去做和没有做的事情的答复,这似乎并不清楚。
添加了反应版本。