1

我在 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() },
      
      ];
    }
}
4

2 回答 2

3

在这种情况下，您可以使用Group Row 模板并根据需要构建它。查看文档，相信您会发现它很有帮助：

<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>
于 2021-09-01T10:45:39.890 回答
1

您可以将摘要与 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

有关更多信息，请查看使用 GroupBy和自定义网格摘要的摘要部分

于 2021-09-01T07:05:59.510 回答