Ag-Grid视觉优化：数据不足时为空白区域添加棋盘格图案

直接通过CSS棋盘格背景+动态控制类名就能实现需求，不用额外插件，步骤如下：

1. 编写棋盘格CSS样式 #

用CSS线性渐变生成棋盘格，避免加载图片，同时确保数据行背景覆盖棋盘格，不影响内容显示：

/* 给Ag-Grid容器添加的棋盘格类 */
.ag-grid-chessboard .ag-body-viewport {
  /* 线性渐变组合生成棋盘格 */
  background-image: 
    linear-gradient(45deg, #f5f5f5 25%, transparent 25%),
    linear-gradient(-45deg, #f5f5f5 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f5f5f5 75%),
    linear-gradient(-45deg, transparent 75%, #f5f5f5 75%);
  /* 调整格子大小，这里是20x20px */
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* 确保数据行背景为白色，覆盖棋盘格 */
.ag-grid-chessboard .ag-row {
  background-color: #ffffff;
}

2. 动态控制类名 #

根据Ag-Grid的实际行数，给容器添加/移除棋盘格类：

// 初始化Ag-Grid配置
const gridOptions = {
  columnDefs: [/* 你的列定义 */],
  rowData: [],
  // 网格就绪后执行类名更新
  onGridReady: (params) => {
    toggleChessboard(params.api);
  },
  // 数据变化时重新判断行数
  onRowDataChanged: (params) => {
    toggleChessboard(params.api);
  }
};

// 核心逻辑：根据行数切换类名
function toggleChessboard(gridApi) {
  const rowCount = gridApi.getDisplayedRowCount();
  // 替换成你的Ag-Grid容器类（比如ag-theme-alpine/ag-theme-balham）
  const gridContainer = document.querySelector('.ag-theme-alpine');
  
  if (rowCount <= 10) {
    gridContainer.classList.add('ag-grid-chessboard');
  } else {
    gridContainer.classList.remove('ag-grid-chessboard');
  }
}

框架适配提示 #

如果你用React/Vue：

• React：在useEffect里监听rowData变化，调用gridApi.getDisplayedRowCount()判断行数，通过className属性控制容器类名。
• Vue：在watch中监听数据源变化，或者在mounted钩子中初始化时执行类名切换逻辑。

自定义调整 #

• 可以修改CSS里的#f5f5f5和background-size来适配你的UI风格，比如把格子调小到15px，或者换成更浅的灰色。
• 如果需要兼容旧浏览器，可以用背景图片替代线性渐变，但渐变方案更轻量化。

内容的提问来源于stack exchange，提问作者Cono