3

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

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

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

4

2 回答 2

6

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;
            }

        }}


}
于 2018-06-19T00:51:36.933 回答
2

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

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

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

希望这可以帮助...

于 2017-09-13T14:43:10.023 回答