以下是一个使用ag-Grid实现行选择的简单示例:
// 创建一个示例数据集
var rowData = [
{make: "Toyota", model: "Celica", price: 35000},
{make: "Ford", model: "Mondeo", price: 32000},
{make: "Porsche", model: "Boxster", price: 72000}
];
// 定义列定义
var columnDefs = [
{headerName: "Make", field: "make"},
{headerName: "Model", field: "model"},
{headerName: "Price", field: "price"}
];
// 配置ag-Grid
var gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
rowSelection: 'multiple',
onSelectionChanged: onSelectionChanged
};
// 创建ag-Grid实例
var gridDiv = document.querySelector('#grid-container');
new agGrid.Grid(gridDiv, gridOptions);
// 当行选择发生变化时调用的回调函数
function onSelectionChanged() {
var selectedRows = gridOptions.api.getSelectedRows();
console.log(selectedRows);
}
// 获取选中的所有行
function getSelectedRows() {
var selectedRows = gridOptions.api.getSelectedRows();
console.log(selectedRows);
}
// 全选行
function selectAllRows() {
gridOptions.api.selectAll();
}
// 取消全选行
function deselectAllRows() {
gridOptions.api.deselectAll();
}
以上代码示例使用ag-Grid的rowSelection
属性来启用多行选择功能,并通过onSelectionChanged
回调函数来处理选择行发生变化的事件。在按钮的点击事件中,我们可以调用ag-Grid的API方法来获取选中的行、全选行或取消全选行。
请注意,以上示例仅演示了ag-Grid的基本行选择功能,您可以根据需要进行定制化操作和样式调整。