计算角度 Infragistics Ui 网格中按行分组的总价值

Question

我在 typescript 12 中使用角度 Infragistics UI 网格

当网格处于分组模式时，我正在尝试计算价格字段的总和。 假设我有 2 个客户组，第 1 组包含 2 个项目，第 2 组包含 3 个项目。 我必须得到每个分组客户的总价（例如 group1 为 300，第二个为 800）。

这是我在 HTML 组件中的代码

<igx-grid #grid id="grid" [data]="listeinvoices" [groupingExpressions]='expr' [allowFiltering]="true"  [autoGenerate]="false" height="500px">

  <igx-column  field="client" header="client" [groupable]="true"></igx-column>
  <igx-column  field="price" header="price" [groupable]="true"></igx-column>

  <igx-column  field="invoicenumber" header="invoice nb" [groupable]="true"></igx-column>
</igx-grid>

ts组件代码：

export class FactureComponent implements OnInit {

public expr: ISortingExpression[];

  @ViewChild("grid") public grid!: IgxGridComponent;


  constructor(private rest: RestService,private toastr: ToastrService,private excelExportService: IgxExcelExporterService) 
  {
    this.expr = [
      { dir: SortingDirection.Asc, fieldName: 'client', ignoreCase: false,
        strategy: DefaultSortingStrategy.instance() },
      
      ];
    }
}

Answer 1

在这种情况下，您可以使用Group Row template 并按照您的意愿构建它。看看documentation，相信对你有帮助：

<ng-template igxGroupByRow let-groupRow>
    <div>
        <span>
        {{ groupRow.expression.fieldName }}:
        </span>
        <span>{{ isDate(groupRow.value) ? formatDate(groupRow.value) : groupRow.value }}</span>
        <igx-badge [value]="groupRow.records.length"></igx-badge>
        <span> Ordered in 2017:</span><span>{{ calc2017(groupRow.records)}}</span>
    </div>
</ng-template>

public calc2017(values: any[]) {
   const startDate = new Date('1/1/2017');
   const endDate = new Date('12/31/2017');

   return values.filter((x) => x.OrderDate >= startDate && x.OrderDate <= endDate).length;
}

您也可以定义自己的行选择器模板

<ng-template igxGroupByRowSelector let-groupByRowContext>
    {{ groupByRowContext.selectedCount }} / {{ groupByRowContext.totalCount  }}
</ng-template>

Answer 2

您可以将摘要与 GroupBy 功能结合使用。现在您已将 groupable 设置为要分组的列，只需将 [hasSummary]="true" 设置为 Price 列即可。

这将显示价格列的所有摘要信息 - 例如计数、最小值、最大值、总和和平均值。在您的情况下，您只想显示总计（总和），所以我的建议是创建一个自定义摘要：

class TotalSummary {

    public operate(data?: any[]): IgxSummaryResult[] {
        const result = [];
        result.push({
            key: 'sum',
            label: 'Total',
            summaryResult: IgxNumberSummaryOperand.sum(data)
        });
        return result;
    }
}


public totalSummary = TotalSummary;

模板：

<igx-column field="Price" header="Price" dataType="number" [groupable]="true" [hasSummary]="true" [summaries]="totalSummary">

此外，如果您只想在 childLeve（分组级别内）上显示摘要，您可以使用 summaryCalculationMode

更多信息，请查看Summaries with GroupBy和Custom Grid Summaries部分