求助：Angular中DevExtreme Scheduler分页功能实现方案

兄弟，我懂你为啥设置了paginate: true和pageSize却没生效——DevExtreme Scheduler跟DataGrid这类表格组件不一样，它是基于时间视图（日/周/月等）设计的，常规的“按条数分页”逻辑天然不匹配。要实现类似分页的性能优化或者数据分段展示，得换这几个思路：

1. 按时间段按需加载（官方推荐，最实用） #

这是Scheduler处理大量数据的标准方案：利用Scheduler加载时传递的时间范围参数，只加载当前视图（比如本周、本月）内的事件，而不是一次性把所有数据塞进去。

代码示例 #

修改你的CustomStore配置，接收loadOptions参数（里面包含当前视图的startDate和endDate），然后筛选对应时间段的数据：

this.chedulerDataSource = new DataSource({ 
  store: new CustomStore({ 
    loadMode: 'raw', 
    load: (loadOptions) => {
      // 拿到当前视图的时间边界
      const { startDate, endDate } = loadOptions;
      
      // 前端筛选：只保留在该时间段内的事件（假设你的事件有startDate字段）
      return this.intervenantData.filter(item => {
        const eventStart = new Date(item.startDate);
        return eventStart >= startDate && eventStart <= endDate;
      });

      // 如果是后端接口，直接把时间参数传给后端，返回对应数据即可
      // return fetch(`/api/events?start=${startDate.toISOString()}&end=${endDate.toISOString()}`)
      //   .then(res => res.json());
    }, 
  })
  // 这里不需要设置paginate和pageSize，按需加载本身就是“时间维度的分页”
});

优势 #

• 完全贴合Scheduler的时间视图逻辑，切换日/周/月视图时自动加载对应数据
• 性能最优，不会一次性加载上千条数据导致卡顿

2. 列表视图下的虚拟滚动分页 #

如果你主要用Scheduler的列表视图（List View），可以开启虚拟滚动，配合DataSource的分页配置实现滚动加载：

步骤1：配置Scheduler开启列表视图和虚拟滚动 #

<dx-scheduler
  [dataSource]="chedulerDataSource"
  [views]="['list']"
  currentView="list"
  [height]="600"
  [virtualScrolling]="{ enabled: true }"
></dx-scheduler>

步骤2：配置带分页的DataSource #

this.chedulerDataSource = new DataSource({ 
  store: new CustomStore({ 
    loadMode: 'processed', // 必须设为processed，让组件处理分页逻辑
    load: (loadOptions) => {
      // loadOptions里会自动带上skip（跳过条数）和take（每页条数）
      const { skip, take } = loadOptions;
      
      // 前端模拟分页取数
      return new Promise(resolve => {
        const paginatedData = this.intervenantData.slice(skip, skip + take);
        resolve({
          data: paginatedData,
          totalCount: this.intervenantData.length // 必须返回总条数，让组件知道总页数
        });
      });

      // 后端接口的话，传递skip和take，返回data和totalCount即可
      // return fetch(`/api/events?skip=${skip}&take=${take}`)
      //   .then(res => res.json());
    }, 
  }), 
  paginate: true, 
  pageSize: 5, 
});

说明 #

这个方案只适用于列表视图，其他时间视图（日/周/月）不支持这种滚动分页。

3. 手动控制的自定义分页（特殊场景用） #

如果一定要做类似DataGrid的“页码切换式分页”，可以自己加一个分页组件，手动控制Scheduler显示的数据范围：

步骤1：添加分页组件（比如dx-pager） #

<dx-pager
  [totalCount]="totalEventCount"
  [pageSize]="pageSize"
  [(currentPage)]="currentPage"
  (currentPageChanged)="refreshSchedulerData()"
></dx-pager>

<dx-scheduler
  [dataSource]="chedulerDataSource"
></dx-scheduler>

步骤2：编写分页逻辑 #

totalEventCount = this.intervenantData.length;
pageSize = 5;
currentPage = 1;
chedulerDataSource: DataSource;

ngOnInit() {
  this.refreshSchedulerData();
}

refreshSchedulerData() {
  // 计算当前页的数据范围
  const startIndex = (this.currentPage - 1) * this.pageSize;
  const endIndex = startIndex + this.pageSize;
  const currentPageData = this.intervenantData.slice(startIndex, endIndex);
  
  // 更新Scheduler的数据源
  this.chedulerDataSource = new DataSource({
    store: new ArrayStore({ data: currentPageData })
  });
}

注意 #

这种方式的缺点是，在日/周/月视图中可能出现大量空白（因为只显示了部分事件），所以更适合只关注事件列表的场景。

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