我有Ag-Grid表。我正在用按钮替换" 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);
}
您可以尝试使用Ag-Grid(单元格)事件在基类中调用处理程序。然后处理您的HTML。
对于简单的测试,请不要打扰渲染器,只需检查您就可以处理事件
html
(cellClicked)="onCellClicked($event)"
背类(Angular 2因此您的Angular 2可能有所不同)
private onCellClicked($event) { }
首先正确。如果有效,您可以设置一个渲染器,以显示GUI的按钮/链接/图标/其他
我弄清楚了。也许这可能不是正确的方法,但确实有效。我在下面发布解决方案。
{headerName: 'Booking XML', field: 'Bookingxml', width: 250, cellRenderer:
function(params) {
return '<button>Expand All</button>';
},
onCellClicked: function (params) {
$('#out').html(params.value);
}
}