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

Posted 2023-03-28

【中文标题】Ag-grid 全宽行似乎不适用于 React 组件

【英文标题】：Ag-grid full width rows does not appear to work with React Components

【发布时间】：2017-02-04 03:08:32

【问题描述】：

我不确定我在这里做错了什么，或者文档是否错误或具有误导性。我正在尝试将 FullWidthRowCell 功能用于每一行的详细信息面板。但是，它似乎并没有像记录的那样完全工作。由于我最近从 ag-grid 的 v4 跳到了 v6，所以我想在报告这个错误之前我会在这里问我是否有错误。

说明：

我更改了现有的数据网格，以便我可能有一个详细信息面板，该面板可以展开以另一种格式显示附加信息。我还想使用我将在其他地方重用的反应组件。目前，面板将打开并仅显示空白区域（面板应位于的位置）并产生错误消息。我在列定义中成功使用了“cellRendererFramework”。

文档参考：

部分：全宽行和主从网格

提供一个fullWidthCellRenderer，告诉网格cellRenderer要做什么 在进行全宽渲染时使用。

cellRenderer 可以是任何 ag-Grid cellRenderer。参考单元格 渲染如何构建 cellRenderers。 cellRenderer 用于 fullWidth 与普通的 cellRenderers 有一个区别，即 传递的参数缺少值和列信息作为 根据定义，cellRenderer 不绑定到特定列。 相反，您应该处理 data 参数，它表示 整行的值。

部分：React CellRendering，指定一个 React cellRenderer

同样的机制可以在下面使用 React 组件 地点：

colDef.cellRendererFramework
colDef.floatingCellRendererFramework
gridOptions.fullWidthCellRendererFramework
gridOptions.groupRowRendererFramework
gridOptions.groupRowInnerRendererFramework

gridOptions.fullWidthCellRendererFramework是指定选项！

示例设置：

下面是我设置的一些导入部分（是的，它省略了 col 定义和我实际版本中的其他内容）。

网格选项（sn-p）：

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>"; 

或者react组件的旧方法（我认为作者不打算再使用它）

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",

编辑：

我将 gridProps 编辑为 gridOptions 以更好地说明这些是我提供给 ag-grid 的网格选项。这似乎并不清楚，根据告诉我完全按照我所说的去做和没有工作的回应。

添加了反应版本。

【问题讨论】：

显然已经为 github issue 找到了修复程序。不幸的是，我没有机会验证修复。

【参考方案1】：

在 6.x 中，提供组件（Angular 2 或 React 的）的机制稍微简化并统一了。

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

gridOptions.fullWidthCellRendererFramework = AppointmentDetail

其他渲染器的想法类似（一些用户 colDef.XxxRendererFramework，其他用户使用 gridOptions.xxxxRendererFramework）。

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

【讨论】：

好的，这不起作用......这就是我写的。我的“gridprops”本质上等于您的示例“gridOptions”，它之所以这样命名，是因为我在 React 中有一个围绕您的组件的包装器。我想我说得不够明显。

【参考方案2】：

你在使用 ag-Grid React 组件吗？

我认为您在 React 应用程序中使用 ag-Grid，但实际上并未使用 React 组件。

你是这样使用 AgGridReact 的吗：

<AgGridReact

  // listen for events with React callbacks
  onRowSelected=this.onRowSelected.bind(this)
  onCellClicked=this.onCellClicked.bind(this)

  // binding to properties within React State or Props
  showToolPanel=this.state.showToolPanel
  quickFilterText=this.state.quickFilterText
  icons=this.state.icons

  // column definitions and row data are immutable, the grid
  // will update when these lists change
  columnDefs=this.state.columnDefs
  rowData=this.state.rowData

  // or provide props the old way with no binding
  rowSelection="multiple"
  enableSorting="true"
  enableFilter="true"
  rowHeight="22"
/>

【讨论】：

从 'ag-grid-react' 导入 AgGridReact;

因为这是我的导入，我会假设我使用的是正确的组件。