如何将按钮列添加到 Ag Grid Javascript 网格

Question

我已经设法让 AgGrid (Javascript) 的社区版本工作

但是，我无法让按钮工作？

function drop( id) {
    alert(id);
}

var columnDefs = [
    { headerName: "HELLO", field: "name", sortable: true, filter: true },
    { headerName: 'One', field: 'fieldName',
                cellRenderer : function(params){
                    return '<div><button (click)="this.drop(params.id)">Click</button></div>'
                }
    }

];

我需要在用户点击按钮时调用该函数

什么都没有发生？控制台中甚至没有错误？

我做错了什么？

社区版是否禁用此功能？

请注意，我需要的不是 Angular 或 Ag Grid 支持的任何其他语言/框架的 Javascript 解决方案

保罗

Answer 1

在使用cellRenderer 时，您不应像(click)="this.drop(params.id)" 这样注册事件。

相反，以 javascript 方式注册侦听器。看看下面的代码。

colDef.cellRenderer = function(params) {
    var eDiv = document.createElement('div');
    eDiv.innerHTML = '<span class="my-css-class"><button class="btn-simple">Push Me</button></span>';
    var eButton = eDiv.querySelectorAll('.btn-simple')[0];

    eButton.addEventListener('click', function() {
        console.log('button was clicked!!');
    });

    return eDiv;
}

参考：ag-grid Cell Renderer