在AG-Grid中,可以通过设置rowSelection
属性来实现区分行选择。以下是一个示例代码,演示了如何实现区分行选择:
// HTML部分
// JavaScript部分
import { GridOptions } from "ag-grid-community";
// 设置Grid的列定义
const columnDefs = [
{ field: "make" },
{ field: "model" },
{ field: "price" }
];
// 设置Grid的行数据
const rowData = [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxster", price: 72000 }
];
// 创建Grid实例
const gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
rowSelection: 'multiple' // 允许多选
};
// 将Grid挂载到DOM元素上
const gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
// 监听rowSelected事件,在选择行时进行操作
gridOptions.api.addEventListener('rowSelected', function(event) {
const selectedRows = gridOptions.api.getSelectedNodes();
// 遍历选中的行,根据需要进行操作
selectedRows.forEach(function(selectedRow) {
// 可以通过selectedRow.data获取行的数据
console.log(selectedRow.data);
});
});
在上述代码中,我们设置了rowSelection
属性为'multiple'
,以允许多选。然后,我们监听了rowSelected
事件,在选择行时进行操作。在事件处理函数中,我们通过gridOptions.api.getSelectedNodes()
方法获取选中的行,并遍历进行操作。在示例中,我们将选中行的数据打印到控制台上,你可以根据需要进行其他操作。