单击 AgGrid 中自定义渲染单元格内的链接后如何防止行选择

Question

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

我想要这样，当我点击里面的链接时PrintCell，应该执行某个动作，而不改变网格本身的状态，并保持当前选定的行被选中，而不会使包含链接的行被选中。我尝试这样做event.stopPropagation并event.preventDefault阻止父行被选中，但无济于事。

任何想法如何实现这一目标？谢谢

Answer 1

2018 年 6 月更新：

Ag-Grid 的 API 已更改。关键的变化是需要e.api.gridOptionsWrapper.gridOptions.suppressRowClickSelection从网格的onCellFocused事件中改变

这是一个完整的解决方案，它使用可重用的单元格渲染器在行的末尾创建不会触发行选择的操作或按钮。此解决方案假定您使用的是 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;
            }

        }}


}