1

我有一个带有排序行的 igx Grid。行按日期排序（这是网格中的一列）。所以我有多个具有相同日期的行。如何在更改日期的行之间放置分隔符？这是一个例子：

Row         Date              Some stuff

1           01.01.2021        some data
2           01.01.2021        some data
3           01.01.2021        some data
__________________________________________
4           03.01.2021        other data
5           03.01.2021        other data
__________________________________________

因此，从 4. 行开始，日期已更改，我如何在4. 以编程方式行？我怎样才能在打字稿中做到这一点？

4

1 回答 1

1

由于 Angular Grid 的 Ignite UI 是虚拟化的，因此它的记录呈现完全是数据驱动的，因此无法在我能想到的行之间插入任意元素。如您所想，它将与渲染/滚动和导航混为一谈，因此可控制模板区域。

乍一看，您的示例可能可以通过一些数据操作和Conditional Row Styling使用简单的边框样式来实现。您可以为每一行提供回调以触发类或自定义样式。

但是，看到您已经按日期排序，看起来您所描述的场景确实可以通过 Grouping 处理。Group By 已经是排序的扩展，添加了带有模板标题和展开折叠功能的组。实际上，在自定义组下有一个确切类型的组示例： 在此处输入图像描述

您应该查看的是表达式，DaySortingStrategy如果默认值不够，但主要是groupingComparer确定项目是否属于同一组。这是示例中的简化版本：

this.sortingStrategy = DaySortingStrategy.instance(); // or DefaultSortingStrategy.instance()
this.initialExpr = [{
    dir: SortingDirection.Asc,
    fieldName: 'OrderDate',
    ignoreCase: true,
    strategy: this.sortingStrategy,
    groupingComparer: (a, b) => {
        const dateA = this.sortingStrategy.getParsedDate(a);
        const dateB = this.sortingStrategy.getParsedDate(b);
        return dateA.day === dateB.day && dateA.month === dateB.month ? 0 : -1;
    }
}];

绑定到网格的groupingExpressions：

<igx-grid #grid1 [data]="data" [groupingExpressions]="initialExpr">

我怀疑groupingComparer甚至可以根据您的数据进一步简化。

于 2021-10-18T10:13:58.390 回答