能否在React Kendo Grid Wrapper中添加虚拟滚动？求示例代码

当然可以！Kendo UI for React的Grid组件完全支持虚拟滚动功能——这个特性在处理大数据集时简直是救星，它只会渲染当前视口内可见的行，避免一次性加载渲染上万条数据导致的页面卡顿，大幅提升性能。

核心配置要点 #

要启用虚拟滚动，你需要确保设置以下几个关键属性：

• scrollable="virtual"：明确开启虚拟滚动模式
• rowHeight：固定每行的高度（必填，虚拟滚动依赖这个值计算可视范围）
• height：给Grid设置固定高度（或者通过CSS指定），让组件能确定视口边界

本地大数据虚拟滚动示例 #

下面是一个完整的本地虚拟滚动Grid示例，模拟了10000条数据：

import React from 'react';
import { Grid, GridColumn } from '@progress/kendo-react-grid';

// 生成10000条模拟数据
const generateLargeDataset = () => {
  const dataset = [];
  for (let i = 1; i <= 10000; i++) {
    dataset.push({
      id: i,
      productName: `Product ${i}`,
      category: `Category ${Math.floor(i / 100)}`,
      price: Math.floor(Math.random() * 1000) + 99
    });
  }
  return dataset;
};

const VirtualScrollLocalGrid = () => {
  const gridData = generateLargeDataset();

  return (
    <div style={{ maxWidth: '1200px', margin: '2rem auto' }}>
      <h3>本地大数据虚拟滚动Grid</h3>
      <Grid
        data={gridData}
        scrollable="virtual"
        rowHeight={52} // 匹配行内元素的实际高度，确保滚动流畅
        height={600} // 固定网格高度
        style={{ width: '100%' }}
      >
        <GridColumn field="id" title="ID" width="100px" />
        <GridColumn field="productName" title="产品名称" width="300px" />
        <GridColumn field="category" title="分类" width="200px" />
        <GridColumn field="price" title="价格" width="150px" />
      </Grid>
    </div>
  );
};

export default VirtualScrollLocalGrid;

远程数据虚拟滚动示例 #

如果你的数据是从后端接口加载的，还可以配合skip、take和onScroll实现按需加载的远程虚拟滚动——只加载当前视口需要的数据，进一步减少带宽消耗：

import React, { useState, useEffect } from 'react';
import { Grid, GridColumn } from '@progress/kendo-react-grid';

const RemoteVirtualScrollGrid = () => {
  const [gridData, setGridData] = useState([]);
  const [totalItems, setTotalItems] = useState(0);
  const [skip, setSkip] = useState(0);
  const pageSize = 50; // 每次请求加载50条数据

  // 模拟后端API请求
  const fetchGridData = async (currentSkip) => {
    // 实际项目中替换为你的后端接口地址
    const response = await fetch(`/api/products?skip=${currentSkip}&take=${pageSize}`);
    const result = await response.json();
    setGridData(result.data);
    setTotalItems(result.totalCount);
  };

  // 初始化加载第一页数据
  useEffect(() => {
    fetchGridData(skip);
  }, [skip]);

  // 滚动时触发数据加载
  const handleGridScroll = (event) => {
    const newSkip = event.page.skip;
    if (newSkip !== skip) {
      setSkip(newSkip);
    }
  };

  return (
    <div style={{ maxWidth: '1200px', margin: '2rem auto' }}>
      <h3>远程数据虚拟滚动Grid</h3>
      <Grid
        data={gridData}
        total={totalItems}
        scrollable="virtual"
        rowHeight={52}
        height={600}
        skip={skip}
        take={pageSize}
        onScroll={handleGridScroll}
        style={{ width: '100%' }}
      >
        <GridColumn field="id" title="ID" width="100px" />
        <GridColumn field="productName" title="产品名称" width="300px" />
        <GridColumn field="category" title="分类" width="200px" />
        <GridColumn field="price" title="价格" width="150px" />
      </Grid>
    </div>
  );
};

export default RemoteVirtualScrollGrid;

注意事项 #

• 确保rowHeight的值和Grid行的实际高度一致，否则会出现滚动偏移、内容重叠的问题
• 如果使用远程虚拟滚动，后端接口需要支持skip和take参数来返回指定范围的数据，同时要返回总数据条数totalCount
• 虚拟滚动模式下，Grid的分页功能会自动失效，因为滚动本身就是分页的替代方式

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