未在 ag-grid 行链接上调用函数答案

【问题标题】：A function is not getting invoked on ag-grid row link未在 ag-grid 行链接上调用函数
【发布时间】：2017-02-07 10:00:48
【问题描述】：

代码：

columndefs: [
    {headerName:'PTP Users', field: 'userId', width:250, cellClass:'ag-cell-text-align-center', cellRenderer : nameLink},
    {headerName:'Current Team ID', field: 'teamId', width:250, cellClass:'ag-cell-text-align-center', cellRenderer : currentTeamIdRenderer}
]


function nameLink(params) {
    let result = '<span style="text-decoration:underline;color:blue;cursor:pointer" onClick="{alert('logged')}">'+params.data.userId+'</span>';
    return result;
}

_showModal() {
    console.log('inside showmodal');
    this.setState({showModal: true});
}

如果我将 onClick 警报更改为 this._showModal，则不会调用“showModal”函数。

【问题讨论】：

标签： javascript reactjs ag-grid

【解决方案1】：

可能有更好（或更快的方法），但是（在 Angular 2 中）我会将点击事件添加到行的网格 html 中

<ag-grid-ng2 id="leftgrid" #agGrid style="height: 90%; width:98%" class="ag-fresh"
         [gridOptions]="gridOptions" 
        [columnDefs]="columnDefs" 
        [showToolPanel]="showToolPanel" 
        [rowData]="displayedFleet" 
        enableColResize 
        enableSorting 
        enableRangeSelection:false
        enableFilter  
        groupUseEntireRow
        externalRowSelection:true
        suppressRowClickSelection:false 
        toolPanelSuppressGroups:true
        toolPanelSuppressValues 
        debug 
        rowHeight="22" 
        (cellClicked)="alert2($event)"
        rowSelection='single'>

注意 cellClicked 事件

然后在后面的代码中跟踪其正确的列是否取决于标题（或字段）属性（如果该列很重要）。

 alert2(ev: any){
    if(ev.colDef.headerName == "TEST"){
        alert('call me');
    }
}

即使不使用 Angular 2，网格仍然有其 html 块和标准事件处理，您应该能够通过查看各种 ag-grid 示例的事件表示法来调整您选择的语言。..

【讨论】：