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

我正在使用AgGrid，在我的网格上有

rowSelection=“multiple”

，在最后一列上有

{cellrenderframework:PrintCell}

，这是一个显示链接的小组件

我希望如此，当我单击

PrintCell

内的链接时，应该执行某个操作，而不改变网格本身的状态，并保持当前选定行处于选中状态，而不使包含链接的行处于选中状态。我尝试执行

event.stopPropagation

和

event.preventDefault

以防止父行被选中，但没有成功

---

你知道如何做到这一点吗？谢谢

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

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

这将完全切换的行选择事件，但仅当您选择了不希望发生行为的列时（注意事项：angular 2示例，我们已将ag网格包装在自己的组件中）

希望这有助于……2018年6月更新：

Ag网格的API已更改。关键更改是需要在网格的

onCellFocused

事件中更改

e.API.gridOptionsWrapper.gridOptions.suppressRowClickSelection

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

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

        }}


}

//类字段
禁用ClickSelectionRenderers=['rowActionRenderer']；
//列定义
...
{headerName:''，字段：'someButton'，
suppressMenu:true，suppressFilter:true，suppressSorting:true，
对,，
SuppressNavigatable:true，suppressResize:true，
cellRenderer:“rowActionRenderer”，
CellRenderParams：{
图标：，
onClick：（e，道具）=>{
//做动作
},
},
},
render（）{
{
if（e.column&&this.disableclickselectionrenders.includes（e.column.colDef.cellRenderer））{
e、 api.gridOptionsWrapper.gridOptions.suppressRowClickSelection=true；
}
否则{
e、 api.gridOptionsWrapper.gridOptions.suppressRowClickSelection=false；
}
}}
}

您好，谢谢您的回复，您能分享Aggrid的完整配置吗？我在自己的组件React样式中有Aggrid，但suppressRowClickSelection似乎不适用于Mem可能是由于语言原因，我添加了一个额外的网格来演示这一点。转到第二个选项卡，单击除注释列sele之外的任何内容cts整行并选择注释列只会推送一条控制台消息。我将尝试一下soon@AbderrahmaneTAHRIJOUTI如果您仍在尝试实现此功能，我会在我的答案中发布一个完整的反应解决方案。@BrianHVB谢谢。我已将其标记为答案，但完全放弃了AgGrid，这不是我项目的正确选择。遗憾的是，他们没有这样做“不要用event.preventDefault（）更优雅地实现这一点，

gridOptionsWrapper

属性是私有的，因此您不能在TypeScript中访问它。@Chris Duncan，我有一段时间没有使用TypeScript了，但我想您可以用

（api）访问它。”.gridOptionsWrapper

或类似的东西。@BrianHVB这就是我最后要做的，但现在我因为any而丢失了类型信息。除此之外，如果他们将属性标记为private，我们就不应该使用它。