ag-grid + react：checkboxSelection 不更新状态

Question

const columnsTaenzer = [{
    headerName: "Any name",
    field: "yesno",
    checkboxSelection: (params: any) => {
        return (state.booleanValue) ? true : false;
    }
}, ...

我想根据状态值显示复选框。

第一次呈现“booleanValue”时为 false。但是当我更改布尔值的状态时，checkboxSelection 无法识别更改。

在 ag-grid 的函数 checkboxSelection 中，state.booleanValue 始终为 false。此外，当我将 valueCache 设置为 false 并使用 force 参数调用 refreshCells() 时，函数 checkboxSelection 始终为 state.booleanValue false.

如何告诉 ag-grid 状态值已更改？

<AgGridReact
    rowHeight={50}
    rowSelection={'multiple'}
    rowDeselection={true}
    columnDefs={columnsTaenzer}
    onSelectionChanged={onSelectionChanged}
    onFirstDataRendered={autoSizeAll}
    rowData={state.tabledata}
    onGridReady={onGridReady}>
</AgGridReact>

//解决方案（更新 - 不工作）

也许不正确，但它有效。使用上下文： Ag-grid Context 这些参数与 redrawRows() 结合使用。只有 redrawRows() 会触发“checkboxSelection”。如果只想触发 valueGetter，请使用 refreshCells({force: true})

现在的问题：

如果您调用 redrawRows，它会更新 table（很好），但上下文最晚会更新。

这意味着它将使用旧上下文更新每个单元格

//更新

大家应该看看react-table。我们切换到这个库，一切都很顺利。

Answer 1

这是满足您要求的工作插件（使用状态更新更新 checkboxSelection）： https://embed.plnkr.co/plunk/e5sKiz13v93Gg1oV

您可以使用上下文来传递布尔值。我试过做你想要达到的目标，它似乎在起作用。 AgGrid 正在获取上下文的最新值。也许您的代码实现存在一些问题。有关工作代码，请参见上面的 plunkr。我通过扩展代码创建它 - https://www.ag-grid.com/javascript-grid-selection/#example-multiple-row-selection

你要做的是，当你点击"toggle checkbox"时，你可以选择

          onClick={() => {
            this.setState(p => {
              this.gridOptions.context = !p.isCheckboxShown; //set opposite value as of state before state is updated
              this.gridApi.redrawRows();
              return { isCheckboxShown: !p.isCheckboxShown };
            });
          }}

或

         onClick={() => {
            this.setState(
              p => {
                return { isCheckboxShown: !p.isCheckboxShown };
              },
              () => {
                this.gridOptions.context = this.state.isCheckboxShown;  //set same value as of state after state is updated
                this.gridApi.redrawRows();
              }
            );
          }}

此外，您可能还想设置 suppressRowClickSelection={true}。当这是 true 时，单击行时不会发生行选择。当您只需要复选框选择时使用。

ag-grid + react：checkboxSelection 不更新状态

ag-grid + react: checkboxSelection does not update state

reactjs

ag-grid