Kendo UI Grid能否基于含数组值的列进行分组？

当然可以实现！不过Kendo UI Grid默认的分组功能并不直接支持值为数组的列，我们需要先对数据做一点预处理，或者通过数据源配置动态转换，就能得到你想要的分组层级啦。

核心思路：扁平化数组字段 #

Kendo Grid的分组依赖单一值的字段，所以我们需要把包含数组的title字段拆分成多条独立记录——每个数组项对应一条记录，同时保留原数据的其他关联字段（比如name）。

方法1：提前预处理原始数据 #

先把你的示例数据转换成适合分组的结构，再绑定到Grid：

// 原始数据
const originalData = [
  {name: "Tony Stark", title: ["CEO", "Super Hero"]},
  {name: "Elon Musk", title: "CEO"}
];

// 扁平化处理：把数组字段拆分成多条记录
const flattenedData = originalData.flatMap(item => {
  // 统一处理：如果title不是数组，就包装成数组
  const titles = Array.isArray(item.title) ? item.title : [item.title];
  // 为每个title生成新的记录，保留原数据的所有字段
  return titles.map(title => ({...item, title}));
});

然后配置Grid并开启分组：

<div id="grid"></div>

<script>
$("#grid").kendoGrid({
  dataSource: {
    data: flattenedData,
    // 指定按title字段分组
    group: { field: "title" }
  },
  columns: [
    { field: "name", title: "Name" }
  ],
  // 可选：展开所有分组（默认是折叠的）
  groupable: true,
  expandAll: true
});
</script>

方法2：通过数据源schema.parse动态转换 #

如果不想修改原始数据（比如数据来自后端接口），可以在Grid的数据源配置里，用schema.parse在数据加载时自动转换：

<div id="grid"></div>

<script>
$("#grid").kendoGrid({
  dataSource: {
    data: originalData,
    schema: {
      parse: function(data) {
        // 这里的处理逻辑和方法1完全一致
        return data.flatMap(item => {
          const titles = Array.isArray(item.title) ? item.title : [item.title];
          return titles.map(title => ({...item, title}));
        });
      }
    },
    group: { field: "title" }
  },
  columns: [
    { field: "name", title: "Name" }
  ],
  groupable: true,
  expandAll: true
});
</script>

最终效果 #

两种方法都会生成你期望的分组结构：

• CEO
  • Tony Stark
  • Elon Musk
• Super Hero
  • Tony Stark

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