您可以同时使用onRowClicked
和onRowDoubleClicked
方法来处理用户单击和双击行的事件。
首先,确保您已经导入了ag-grid-community
和ag-grid-react
依赖。
然后,在您的组件中创建一个Grid
组件并定义onRowClicked
和onRowDoubleClicked
方法。在这些方法中,您可以处理单击和双击行的逻辑。
以下是一个示例代码:
import React 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 MyGridComponent = () => {
// 定义单击行的处理函数
const onRowClicked = (event) => {
console.log('行已单击:', event.data);
};
// 定义双击行的处理函数
const onRowDoubleClicked = (event) => {
console.log('行已双击:', event.data);
};
// 定义表格列和数据
const columnDefs = [
{ headerName: '姓名', field: 'name' },
{ headerName: '年龄', field: 'age' },
{ headerName: '城市', field: 'city' },
];
const rowData = [
{ name: '张三', age: 25, city: '北京' },
{ name: '李四', age: 30, city: '上海' },
{ name: '王五', age: 35, city: '广州' },
];
return (
);
};
export default MyGridComponent;
在上面的示例代码中,onRowClicked
和onRowDoubleClicked
方法分别打印了单击和双击行的数据。您可以根据自己的需求,在这些方法中添加适当的逻辑。
请注意,您可以根据自己的需求自定义columnDefs
和rowData
。
最后,将MyGridComponent
组件集成到您的应用程序中,并确保它能够正常渲染和显示表格。