单击 Ag Grid 中自定义渲染单元格内的 link 后如何防止行选择

Question

我正在使用 AgGrid，我的网格上有 rowSelection="multiple"，最后一列有 {cellRendererFramework: PrintCell}，这是一个显示 link 的小组件。

我想要这样，当我点击PrintCell里面的link时，应该执行某个动作，不改变网格本身的状态，并保持当前选中的行未选中包含 link 的行。我尝试执行 event.stopPropagation 和 event.preventDefault 来防止选择父行，但无济于事。

知道如何实现吗？谢谢

Answer 1

由于行点击是一种指定的行为，因此使用复选框 selection 并完全禁用焦点行 selection 可能更容易。但是，如果您想遵循这条路径，我会通过拦截单元格 Focus 中的事件并在那里阻止行 selection 来生成所需的行为。

private onCellFocused($event) {
    if($event.column && $event.column.colId == "commentid"){
        this.gridOptions.suppressRowClickSelection = true;
    } else {
        this.gridOptions.suppressRowClickSelection = false;
    }

这会完全切换 selection 事件的行，但前提是您 select 您不希望该行为发生的列（警告：angular 2 示例和我们已经将 ag-grid 包装在我们自己的组件中。

希望这对您有所帮助...

Answer 2

2018 年 6 月更新：

Ag-Grid 的 API 已更改。关键的变化是需要在网格

的 onCellFocused 事件中对 e.api.gridOptionsWrapper.gridOptions.suppressRowClickSelection 进行更改

这是一个完整的解决方案，它使用可重复使用的单元格渲染器在行的末尾创建不会触发行选择的操作或按钮。此解决方案假定您使用的是 React 版本的 ag-grid，并且您使用的是自定义单元格渲染器。

// class fields

disableClickSelectionRenderers = ['rowActionRenderer'];

// columns defs
...
{headerName: '', field: 'someButton',
    suppressMenu: true, suppressFilter: true, suppressSorting: true,         
    suppressMovable: true,
    suppressNavigable: true, suppressResize: true,
    cellRenderer: 'rowActionRenderer',
    cellRendererParams: {
        icon: <i className="fa fa-pencil"/>,
        onClick: (e, props) => {
            // do the action
        },
    },
},


render() {
    <AgGridReact
        columnDefs={...}
        // ... other properties
        onCellFocused={e => {
            if (e.column && this.disableClickSelectionRenderers.includes(e.column.colDef.cellRenderer)) {
                e.api.gridOptionsWrapper.gridOptions.suppressRowClickSelection = true;
            }
            else {
                e.api.gridOptionsWrapper.gridOptions.suppressRowClickSelection = false;
            }

        }}


}

Answer 3

对于 TS + Angular

在您的 rowclick 方法中使用它

如果您想忽略特定的单元格，这段代码可以帮助您

if (!(
    this.gridApi?.getFocusedCell()?.column.getColId() ===
    'columnName')) {
  //your code here
}

gridApi 大概可以从 onGridReady 方法中得到

单击 Ag Grid 中自定义渲染单元格内的 link 后如何防止行选择

How to prevent row selection after clicking on link inside custom rendered cell in AgGrid

reactjs

ag-grid

ag-grid-react