Ag-grid 全宽行似乎不适用于 React 组件

2024-06-20

我不确定我在这里是否做错了什么,或者文档是否错误或具有误导性。我正在尝试对每行的详细信息面板使用 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 提供的网格选项。根据要求我完全按照我所说的去做和没有做的事情的答复,这似乎并不清楚。

添加了反应版本。


在 6.x 中,提供组件(Angular 2 或 React 组件)的机制得到了一些简化和统一。

要在 6.x 中提供组件,请使用以下语法:

gridOptions.fullWidthCellRendererFramework = AppointmentDetail

其余渲染器的想法类似(一些用户使用 colDef.XxxRendererFramework,其他用户使用 gridOptions.xxxxRendererFramework)。

See https://www.ag-grid.com/javascript-grid-cell-rendering/#reactCellRendering https://www.ag-grid.com/javascript-grid-cell-rendering/#reactCellRendering有关这方面的更多信息

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Ag-grid 全宽行似乎不适用于 React 组件 的相关文章

随机推荐