Ag-Grid 中自定义无数据提示为可点击链接的实现教程

import React from 'react';

export type NoRowsLinkProps = {
  text?: string;
  actionFunction?: (event: React.MouseEvent<HTMLAnchorElement>) => void; // 明确事件类型
};

function NoRowsLink(props: NoRowsLinkProps) {
  // 定义一个空函数作为默认action，避免props.actionFunction不存在时报错
  const defaultAction = (event: React.MouseEvent<HTMLAnchorElement>) => {
    console.log("No action defined for this link.");
  };

  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <a onClick={props.actionFunction ? props.actionFunction : defaultAction}>
        {props.text ? props.text : '无数据显示，点击操作'}
      </a>
    </div>
  );
}

export default NoRowsLink;

import React from 'react';

export type NoRowsLinkProps = {
  text?: string;
  actionFunction?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
};

function NoRowsLink(props: NoRowsLinkProps) {
  const defaultAction = (event: React.MouseEvent<HTMLAnchorElement>) => {
    // 阻止默认行为，防止页面刷新或跳转
    event.preventDefault();
    console.log("No action defined for this link.");
  };

  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
    event.preventDefault(); // 阻止默认行为
    if (props.actionFunction) {
      props.actionFunction(event);
    } else {
      defaultAction(event);
    }
  };

  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      {/* 添加 href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" 确保链接被正确渲染和识别 */}
      <a 
        href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" 
        onClick={handleClick} 
        style={{ cursor: 'pointer', color: 'blue', textDecoration: 'underline' }}
      >
        {props.text ? props.text : '无数据显示，点击此处进行操作'}
      </a>
    </div>
  );
}

export default NoRowsLink;

import React, { useState, useCallback } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

import NoRowsLink, { NoRowsLinkProps } from './NoRowsLink'; // 引入你的自定义组件

const MyAgGridComponent = () => {
  const [rowData, setRowData] = useState([]); // 初始为空，展示无数据提示
  const [columnDefs] = useState([
    { field: 'make' },
    { field: 'model' },
    { field: 'price' },
  ]);

  // 定义链接点击时执行的函数
  const handleNoRowsLinkClick = useCallback(() => {
    alert('您点击了无数据提示链接！正在打开新表单...');
    // 这里可以放置打开表单、加载数据等逻辑
    console.log('执行了无数据提示的点击操作');
  }, []);

  // 配置传递给 NoRowsLink 组件的参数
  const applicableNoRowsOverlayComponentParams: NoRowsLinkProps = {
    text: '当前没有数据，点击此处添加新项',
    actionFunction: handleNoRowsLinkClick,
  };

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
        // 注册自定义的无数据提示组件
        noRowsOverlayComponent={NoRowsLink}
        // 传递参数给自定义组件
        noRowsOverlayComponentParams={applicableNoRowsOverlayComponentParams}
        // 其他 Ag-Grid 配置...
      />
    </div>
  );
};

export default MyAgGridComponent;