Ag网格单元渲染器图标不可点击反应

Question

我有一个简单的单元格渲染器，它返回一个图标：

import React from 'react'
function ActionRenderer(params) {
const editRedirect = (e) =>{
console.log("Clicked");
}
return (
<div>
<span class="actionIcons editIcon">
<i onClick={editRedirect} class="fas fa-edit" href="/details"></i>
</span>
</div>
)
}
export default ActionRenderer

在创建AgGrid组件时，我还定义了一个onRowClicked事件。

<AgGridReact
columnDefs={columnDefs}
defaultColDef={{ width: 160 }}
rowData={rowData}
frameworkComponents={frameworkComponents}
onRowClicked={rowClicked}
></AgGridReact>

因此，我的图标是不可点击的，但它们下面的一行是可点击的。我如何使图标可点击，但如果在图标之外点击了一行，那么rowClicked功能就会运行？换句话说，行点击覆盖了我的图标点击，我要改变这一点。

const frameworkComponents = {
//  buttonRenderer: ButtonRenderer,
progressBarRenderer: ProgressBarRenderer,
actionRenderer: ActionRenderer,
}
const columnDefs = [
{
headerName: 'Full Name',
field: 'name',
unSortIcon: true,
sortable: true,
filter: true,
lockPosition: true,
},
{
headerName: 'Actions',
field: 'actions',
width: 140,
lockPosition: true,
cellRenderer: 'actionRenderer',
},
]

Answer 1

以下对我有效：

columnDefs=[
{
headerName: 'Actions',
field: 'ACTION',
sortable: true,
filter: true,
resizable: true,
cellRenderer: function (params) {
return '<span title="Edit" ><i class="fas fa-pencil-alt edit" data-action-type="edit"></i> <span title="Delete" ><i class="fas fa-trash delete" data-action-type="delete"></i></span>';
},
]

<ag-grid-angular
[pagination]="true"
[paginationPageSize]="15"
[rowData]="rowDataBlackList"
[columnDefs]="columnBlackList"
class="ag-theme-material"
style="height: 500px"
(cellClicked)="onCellClicked($event)"
#agGrid
>
</ag-grid-angular>

点击单元格执行以下操作：

onCellClicked($event) {
if($event.column.getColId()=='ACTION')
{
let actionType = $event.event.target.getAttribute("data-action-type");
switch(actionType) {
case "edit":  
{  
console.log("Edit action clicked");  
break;
}  
case "delete":  
{  
console.log("Delete action clicked"); 
break; 
}  
}

}
}

Answer 2

尝试使用按钮标记代替span和按钮内的图标，您可以使用css删除背景。