如何在DevExtreme React Scheduler中限制组组合

方法一：预处理资源数据，只生成有效的场馆-分区组合 #

这是最简洁的方式，从源头上避免无效组合出现：

1. 先定义场馆与对应分区的映射关系：

// 配置每个场馆允许的分区
const validHallSections = {
  'Hall 1': ['Section 1', 'Section 2', 'Section 3'],
  'Hall 2': ['Section 1', 'Section 2'], // Hall 2 仅保留两个分区
  'Hall 3': ['Section 1', 'Section 2', 'Section 3']
};

2. 动态生成符合规则的资源数组：

// 生成仅包含有效组合的资源项
const schedulerResources = Object.entries(validHallSections).flatMap(([hall, sections]) => {
  return sections.map(section => ({
    id: `${hall}-${section}`,
    text: `${hall} - ${section}`,
    hall,
    section
  }));
});

3. 在Scheduler中配置资源与分组：

<Scheduler
  // 其他核心配置（如dataSource、views等）
  resources={[{
    fieldExpr: 'resourceId', // 预约数据中关联资源的字段
    dataSource: schedulerResources,
    label: '场馆分区'
  }]}
  grouping={{
    groups: ['hall', 'section'], // 按场馆、分区层级分组
    autoExpandAll: true
  }}
/>

这种方式会让Scheduler只渲染存在的场馆-分区组合，完全不会出现无效分组项，无需修改任何内置组件。

方法二：通过资源单元格模板过滤无效项 #

如果需要保留原有资源结构，可通过cellTemplate在渲染时隐藏无效分区：

<Scheduler
  // 其他配置
  resources={[
    {
      fieldExpr: 'hallId',
      dataSource: hallsDataSource, // 场馆数据源
      label: '场馆'
    },
    {
      fieldExpr: 'sectionId',
      dataSource: sectionsDataSource, // 全部分区数据源
      label: '分区',
      // 自定义单元格模板，过滤无效组合
      cellTemplate: (item) => {
        // 根据当前场馆名称，获取其允许的分区列表
        const currentHallAllowedSections = validHallSections[item.groupData.text];
        const currentSection = sectionsDataSource.find(s => s.id === item.data.id);
        
        // 若当前分区不在场馆允许列表中，返回空内容隐藏单元格
        if (!currentHallAllowedSections.includes(currentSection.text)) {
          return null;
        }
        return <div>{currentSection.text}</div>;
      }
    }
  ]}
  grouping={{
    groups: ['hallId', 'sectionId'],
    autoExpandAll: true
  }}
/>

注意：这种方式可能会留下空单元格占位，建议优先使用方法一。

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