AG-Grid无限模型下加载时添加行级单元格骨架占位符

1. 自定义骨架单元格渲染器 #

创建一个生成骨架效果的自定义单元格渲染器，每个单元格渲染带渐变动画的占位块：

const SkeletonCellRenderer = () => {
  return {
    init(params) {
      const skeletonEl = document.createElement('div');
      skeletonEl.className = 'ag-skeleton-cell';
      params.eGui.appendChild(skeletonEl);
    },
    getGui() {
      return document.createElement('div');
    }
  };
};

配套CSS实现渐变闪烁效果：

.ag-skeleton-cell {
  width: 100%;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

2. 配置无限模型与占位行 #

在无限模型的getRows回调中，先返回对应数量的占位行，标记未加载状态，同时为所有列指定使用自定义骨架渲染器：

const gridOptions = {
  rowModelType: 'infinite',
  cacheBlockSize: 100,
  getRowNodeId: (data) => data.id || `placeholder-${data.placeholderId}`,
  columnDefs: [
    { field: 'name', loadingCellRenderer: SkeletonCellRenderer },
    { field: 'age', loadingCellRenderer: SkeletonCellRenderer },
    { field: 'email', loadingCellRenderer: SkeletonCellRenderer },
    // 其他列同理配置
  ],
  getRows: (params) => {
    // 模拟异步数据请求
    setTimeout(() => {
      const realData = fetchYourData(params.startRow, params.endRow);
      if (realData.length > 0) {
        params.successCallback(realData, params.endRow);
      } else {
        params.successCallback([], -1);
      }
    }, 1000);

    // 先返回占位行填充未加载区域
    const placeholderRows = Array.from({ length: params.endRow - params.startRow }, (_, i) => ({
      placeholderId: `${params.startRow}-${i}`,
      isPlaceholder: true
    }));
    params.successCallback(placeholderRows, params.endRow);
  }
};

3. 优化：区分真实行与占位行 #

通过getRowStyle为占位行添加统一样式，保证行高一致：

const gridOptions = {
  // ...其他配置
  getRowStyle: (params) => {
    if (params.data?.isPlaceholder) {
      return { opacity: 0.7 };
    }
  }
};

设置完成后，滚动到未加载区域时，AG-Grid会先渲染带骨架效果的占位单元格，待真实数据加载完成后自动替换。

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