在AG-Grid中,在单元格上使用复选框,需首先为列定义checkbox,然后设置cellRenderer为函数类型或目标渲染器的组件名称,该函数或目标渲染器的组件应返回用于呈现checkbox的HTML。
以下是一个示例代码片段,在AG-Grid中使用Checkbox的单元格级别:
columnDefs = [
{ headerName: 'Name', field: 'name' },
{ headerName: 'Select', field: 'selected', checkboxSelection: true },
{ headerName: 'Date', field: 'date' },
];
rowData = [
{ name: 'John Smith', selected: false, date: '10/10/2020' },
{ name: 'Jane Doe', selected: false, date: '10/11/2020' },
{ name: 'Bob Johnson', selected: false, date: '10/12/2020' }
];
gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
onGridReady: function(params) {
params.api.sizeColumnsToFit();
}
};
在此示例中,我们首先在列定义中定义了带有checkboxSelection属性的Select列。 checkboxSelection会在单元格中显示一个checkbox。 然后将此列添加到rowData中。
参数api提供了对网格API的访问权限。在此示例中,我们使用sizeColumnsToFit()来自适应网格并调整其大小。
此外,我们可以使用gridOptions.api.getSelectedNodes()来获取选定的节点,并访问选定的节点的值。 例如,可以使用以下代码来获取选定节点的名称和日期:
var selectedNodes = gridOptions.api.getSelectedNodes();
var selectedData = selectedNodes.map(function(node) {
return {
name: node.data.name,
date: node.data.date,
};
});
console.log(selectedData);