AG Grid - 抑制特定 column/cell 内的行选择

Question

使用 AG Grid，我需要创建一个 table 行 selection 单击，但单击某些单元格不会导致行被 selected。

到目前为止，我的最佳想法是当鼠标悬停在非 selecting 单元格上时禁用单击行 selection。类似于：

gridOptions.onCellMouseOver = (event) => {
 if (/*cell is from non-select column*/ )
   this.gridOptions.suppressRowClickSelection = true;
}

gridOptions.onCellMouseOut = (event) => {
 if (/*cell is from non-select column*/ )
   this.gridOptions.suppressRowClickSelection = false;
}

唯一的问题是 onCellMouseOver 和 Out 似乎没有及时触发；如果您从 select 一行快速移动到在无 select 单元格内单击，该行 selection 仍会触发。我有一个额外的 onCellClicked 函数，它会触发并显示 gridOptions.suppressRowClickSelection 按预期设置为 true，但似乎属性没有及时设置，因为点击速度太快。

如果有人知道解决此 onMouseOver 计时问题的方法，我很想知道。或者，如果总体上有更好的方法来实现此功能，我会全力以赴。

谢谢

Answer 1

这是一种方法：

this.gridOptions = {
    suppressRowClickSelection: true,
    onCellClicked: (e) => {
        if (e.column.colId !== 'name') { // cell is from non-select column
            e.node.setSelected(true);
        }
    }
};

基本上，我们仅在单击符合条件的单元格时才手动 select 该行。

Answer 2

我使用这个解决方法是因为我需要在点击时显示全宽行，但在点击第一列后我应该导航

<ag-grid-angular (gridReady)="onGridReady($event)" (rowClicked)="onRowClick($event)">


onRowClick(params: RowClickedEvent) {
    if(this.gridApi.getFocusedCell().column.getColId() === 'number'){
        this.goToItem(params.data.id);
        return;
    }

    //Other row logic
}

当然，您必须按照示例中的定义定义 gridAPI 变量。

gridApi: GridApi;
gridColumnApi: ColumnApi;

onGridReady(params: any) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
}

AG Grid - 抑制特定 column/cell 内的行选择

AG Grid - Suppress row selection inside a particular column/cell

typescript

ag-grid