2

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

描述：

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

文档参考：

部分：全宽行和主从网格

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

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

部分： React Cell Rendering，指定 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",

编辑：

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

添加了反应版本。

4

2 回答 2

2

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

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

gridOptions.fullWidthCellRendererFramework = AppointmentDetail

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

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

于 2016-09-29T14:17:53.937 回答
0

你在使用 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"
/>
于 2016-10-12T08:59:34.650 回答