Ag-Grid：如何在单击该行或该行的任何单元格时突出显示特定行，而不选择该行？

Question

我正在使用 ag-grid 并有复选框来选择行。 我想要做的是，每当用户单击该行的任何行或单元格时，整个行都会突出显示，无需选择该行。

Answer 1

我认为最好的解决方案是使用

onCellClicked

回调，并将该行设置为选定状态。看看这段代码：

<AgGridReact
    onCellClicked={this.cellClicked}
    columnDefs={this.state.columnDefs}
    rowData={this.state.rowData}
/>

以及你的回调方法：

cellClicked(params) {
    params.node.setSelected(true)
}

这里是一个适合您的 StackBlitz 示例。

Answer 2

我们使用 onRowClicked 属性来获取 node 值。使用节点值，我们通过以下方式将突出显示的行的 setSeleted 设置为 true。

const rowDataSelection = useCallback(value => {
    value.node.setSelected(true)  // this will be used to highlight the row
    setRowData({rowData: value.data || {}})
})

<Grid
    columnDefs={columnDefs}
    defaultColDef={{ resizable: true, sortable: true }}
    licenseKey={'abc-123'}
    onGridReady={onGridReadyAPI}
    autoGroupColumnDef={autoGroupColumnDef}
    treeData={true}
    groupDefaultExpanded={-1}
    onRowClicked={rowDataSelection}
    getDataPath={getDataPath}
    rowData={searchData}
    ref={gridRef}
    overlayNoRowsTemplate={'No results found. Please refine your search criteria.'}
/>