单击按钮应使用 ag-grid 中的 cellRenderer 在 <div> 中显示数据

Question

我有 ag-grid table。我正在用按钮替换 'Bookingxml' 列数据。单击该按钮时，它应该会在 'out' div 中显示该特定单元格的数据。我浏览了文档并想通了，cellRenderer 是实现它的方法。我尝试了下面的代码，但是没有用。

var gridOptions = {
    columnDefs: [

        {headerName: 'Booking Type', field: 'BookingType', width: 200},
        {headerName: 'Booking Error', field: 'BookingError', width: 150 },
        {headerName: 'Booking Date', field: 'BookingDate', width: 150, filter: 'number', filterParams: {apply: true, newRowsAction: 'keep'}},
        {
            headerName: 'Booking XML', field: 'Bookingxml', width: 250, 
            cellRenderer: function (params) {

                return '<button ng-click="display()">View XML</button>';
            }

        }
    ],
    enableColResize: true,
    enableSorting: true,
    enableFilter: true

};

return gridOptions;
}

function display(xml) {
    $('#out').html(params.value);
}

Answer 1

您可以尝试使用 ag-grid (cellClicked) 事件来调用您的基地中的处理程序 class。然后这会处理填充您的 html.

对于简单的测试，不要理会渲染器，只需检查您是否可以处理事件

html

(cellClicked)="onCellClicked($event)"

返回 class（angular 2 所以你的可能不同）

private onCellClicked($event) {  }

首先正确。如果可行，您可以设置渲染器以相应地显示 button/link/icon/other 以完成 gui

Answer 2

我明白了。也许，这可能不是正确的方法，但它确实有效。我在下面发布解决方案。

{headerName: 'Booking XML', field: 'Bookingxml', width: 250, cellRenderer: 
                function(params) {
                return '<button>Expand All</button>';
                },
                onCellClicked: function (params) {

                    $('#out').html(params.value);
                }
            }

单击按钮应使用 ag-grid 中的 cellRenderer 在 <div> 中显示数据

button click should display data in <div> using cellRenderer in ag-grid

jquery

angularjs

ag-grid

ag-grid-react