Question

我不确定我在这里做错了什么，或者文档是错误还是误导。我正在尝试将FullWidthRowCell功能用于每行的详细信息面板。但是，它似乎没有完全按照记录的方式工作。当我最近从ag4网格的v4跳到v6时，我想我会问这里是否有错误，然后再做错误报告。

说明

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

文档参考：

部分：全宽行和＆amp;主细节网格

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

cellRenderer可以是任何ag-Grid cellRenderer。请参阅Cell   渲染如何构建cellRenderers。 cellRenderer for   fullWidth与普通的cellRenderers有一个区别，就是   传递的参数缺少值和列信息   根据定义，cellRenderer不依赖于特定列。   相反，你应该处理数据参数，它代表了   整行的价值。

部分：反应单元格渲染，指定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",

编辑（S）：

我将gridProps编辑为gridOptions以更好地说明这些是我给ag-grid的网格选项。根据回应告诉我完全按照我的说法做了但没有奏效，这似乎并不清楚。

添加了反应版本。

Answer 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

Answer 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 Components

2 个答案: