在Ag-Grid React中,可以使用onSelectionChanged
事件来监听选择更改。然后,通过getSelectedNodes
方法来获取当前选中的节点,并更新相应的状态。
下面是一个示例代码:
import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
const MyGrid = () => {
const [rowData, setRowData] = useState([
{ name: 'John Doe', age: 25 },
{ name: 'Jane Smith', age: 30 },
{ name: 'Bob Johnson', age: 35 }
]);
const [selectedRows, setSelectedRows] = useState([]);
const onSelectionChanged = () => {
const selectedNodes = gridApi.getSelectedNodes();
const selectedData = selectedNodes.map(node => node.data);
setSelectedRows(selectedData);
};
const gridOptions = {
onSelectionChanged: onSelectionChanged
};
let gridApi;
const onGridReady = params => {
gridApi = params.api;
};
return (
Selected Rows:
{selectedRows.map((row, index) => (
{row.name}
))}
);
};
export default MyGrid;
在上面的示例中,我们使用了useState
来定义了rowData
和selectedRows
的状态。rowData
是表格的数据,selectedRows
是当前选中的行数据。
在onSelectionChanged
函数中,我们使用getSelectedNodes
方法获取当前选中的节点,然后通过map
方法获取选中的数据,并将其更新到selectedRows
状态中。
然后,我们将onSelectionChanged
函数传递给gridOptions
配置对象中的onSelectionChanged
属性,以便在选择更改时触发事件。
最后,在渲染的组件中,我们使用AgGridReact
组件来显示表格,并在底部显示当前选中的行数据。
希望以上的解决方法能够帮助到您!