行分隔符 igx Grid

Posted 2023-04-13

【中文标题】行分隔符 igx Grid

【英文标题】：Row divider igx Grid

【发布时间】：2021-11-30 03:55:24

【问题描述】：

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

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. 行之前放置一个分隔符（类似于本教程中的内容：https://www.infragistics.com/products/ignite-ui-angular/angular/components/divider）？我如何在 Typescript 中做到这一点？

【参考方案1】：

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

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

但是，由于您已经按日期排序，因此您所描述的场景看起来确实可以通过 Grouping 处理。 Group By 已经是排序的扩展，添加了带有模板标题和展开折叠功能的组。实际上，在custom group by example 下有一个这种确切类型的组的示例：

您应该查看的是表达式，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 甚至可以根据您的数据进一步简化。