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

支持的任何其他 language/framework

保罗

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

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

How do I add a button column to Ag Grid Javascript grid

javascript

ag-grid