javascript - 如何将按钮列添加到 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>'
                }
    }

];

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

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

我做错了什么？

社区版是否禁用此功能？

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

保罗

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

Reference: ag-grid Cell Renderer