Grid Summaries Overview

    The Angular UI grid in Ignite UI for Angular has a summaries feature that functions on a per-column level as group footer. Angular grid summaries is powerful feature which enables the user to see column information in a separate container with a predefined set of default summary items, depending on the type of data within the column or by implementing a custom angular template in the Grid.

    데모

    Note

    열 요약은 모든 열 값의 함수이지만 필터링이 적용된 경우에는 열 요약은 필터링된 결과 값의 함수가 됩니다

    Ignite UI for Angular에서 Grid summaries을 열 단위 수준으로 활성화하고 필요한 열에 대해서만 활성화할 수 있습니다. Grid 요약은 열의 데이터 유형에 따라 사전 정의된 기본 요약 세트를 제공하므로 시간을 절약할 수 있습니다.

    string 및 boolean data types의 경우 다음의 함수를 사용할 수 있습니다:

    • count

    number 데이터 유형의 경우 다음의 함수를 사용할 수 있습니다:

    • count
    • min
    • max
    • average
    • sum

    date 데이터 유형의 경우 다음의 함수를 사용할 수 있습니다:

    • count
    • earliest
    • latest

    hasSummary 속성을 true로 설정하면 Grid 요약이 열 단위로 활성화됩니다. 또한, 각 열의 요약은 열 데이터 형식에 따라 해결되는 것에 유의하십시오. igx-grid에서 기본 열 데이터 유형은 string이므로 number 또는 date 별 요약을 원하는 경우, dataType 속성을 number 또는 date로 설정해야 합니다.

    <igx-grid #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)">
    <igx-column field="ProductID" header="Product ID" width="200px"  [sortable]="true">
    </igx-column>
    <igx-column field="ProductName" header="Product Name" width="200px" [sortable]="true" [hasSummary]="true">
    </igx-column>
    <igx-column field="ReorderLevel" width="200px" [editable]="true" [dataType]="'number'" [hasSummary]="true">
    </igx-column>
</igx-grid>

    특정 열 또는 열 목록에서 요약을 활성화/비활성화하는 또 다른 방법은 igx-grid의 공개 메소드 enableSummaries/disableSummaries를 사용하는 것입니다.

    <igx-grid #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)" >
    <igx-column field="ProductID" header="Product ID" width="200px"  [sortable]="true">
    </igx-column>
    <igx-column field="ProductName" header="Product Name" width="200px" [sortable]="true" [hasSummary]="true">
    </igx-column>
    <igx-column field="ReorderLevel" width="200px" [editable]="true" [dataType]="'number'" [hasSummary]="false">
    </igx-column>
</igx-grid>
<button (click)="enableSummary()">Enable Summary</button>
<button (click)="disableSummary()">Disable Summary </button>

    public enableSummary() {
    this.grid1.enableSummaries([
        {fieldName: "ReorderLevel", customSummary: this.mySummary},
        {fieldName: "ProductID"}
    ]);
}
public disableSummary() {
    this.grid1.disableSummaries("ProductName");
}

    이러한 함수가 요구 사항을 충족시키지 못하면 특정 열에 대한 사용자 요약을 제공할 수 있습니다. 이를 실행하려면 열 데이터 유형 및 필요에 따라 기본 클래스인 IgxSummaryOperand, IgxNumberSummaryOperand 또는 IgxDateSummaryOperand 중에서 하나를 무효화해야 합니다. 이 방법으로 기존 함수를 다시 정의하거나 새로운 함수를 추가할 수 있습니다. IgxSummaryOperand 클래스는 count 메소드에 대해서만 기본 실행을 제공합니다. IgxNumberSummaryOperand는 IgxSummaryOperand를 확장하고 min, max, sum 및 average의 구현을 제공합니다. IgxDateSummaryOperand는 IgxSummaryOperand를 확장하며 earliest 및 latest를 제공합니다.

    import { IgxSummaryResult, IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand } from 'igniteui-angular';

class MySummary extends IgxNumberSummaryOperand {

    constructor() {
        super();
    }

    operate(data?: any[]): IgxSummaryResult[] {
        const result = super.operate(data);
        result.push({
            key: 'test',
            label: 'Test',
            summaryResult: data.filter(rec => rec > 10 && rec < 30).length
        });
        return result;
    }
}

    위의 코드에서 메소드 operate는 인터페이스인 IgxSummaryResult의 목록을 반환하는 것을 볼 수 있습니다.

    interface IgxSummaryResult {
    key: string;
    label: string;
    summaryResult: any;
}
    Note

    요약 행 높이를 올바르게 계산하기 위해 Grid의 operate 메소드에서 데이터가 비어있는 경우에도 항상 적절한 길이의 IgxSummaryResult 배열을 반환해야 합니다.

    이제 UnitsInStock 열에 사용자 요약을 추가해 보겠습니다. summaries 속성을 아래에서 작성하는 클래스로 설정하면 됩니다.

    <igx-grid #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)" >
    <igx-column field="ProductID" width="200px"  [sortable]="true">
    </igx-column>
    <igx-column field="ProductName" width="200px" [sortable]="true" [hasSummary]="true">
    </igx-column>
    <igx-column field="UnitsInStock" width="200px" [dataType]="'number'" [hasSummary]="true" [summaries]="mySummary" [sortable]="true">
    </igx-column>
    <igx-column field="ReorderLevel" width="200px" [editable]="true" [dataType]="'number'" [hasSummary]="true">
    </igx-column>
</igx-grid>

    ...
export class GridComponent implements OnInit {
    mySummary = MySummary;
    ....
}

    Custom summaries, which access all Grid data

    Now you can access all grid data inside the custom column summary. Two additional optional parameters are introduced in the IgxSummaryOperand operate method. As you can see in the code snippet below the operate method has the following three parameters:

    • columnData - gives you an array that contains the values only for the current column
    • allGridData - gives you the whole grid data source
    • fieldName - current column field
    class MySummary extends IgxNumberSummaryOperand {
    constructor() {
        super();
    }
    operate(columnData: any[], allGridData = [], fieldName?): IgxSummaryResult[] {
        const result = super.operate(allData.map(r => r[fieldName]));
        result.push({ key: 'test', label: 'Total Discontinued', summaryResult: allData.filter((rec) => rec.Discontinued).length });
        return result;
    }
}

    그룹별 요약

    열 단위로 그룹화하면 Grid는 summaryCalculationMode 및 summaryPosition 속성을 사용하여 요약 위치 및 계산 모드를 변경할 수 있습니다.

    summaryCalculationMode 속성의 사용 가능한 값은 다음과 같습니다:

    • rootLevelOnly - 요약은 루트 수준에 대해서만 계산됩니다.
    • childLevelsOnly - 요약은 하위 수준에 대해서만 계산됩니다.
    • rootAndChildLevels - 요약은 루트 및 하위 수준 모두에 대해 계산됩니다. 이것이 기본값입니다.

    summaryPosition 속성의 사용 가능한 값은 다음과 같습니다:

    • top - 요약 행은 그룹화 행의 하위 앞에 표시됩니다.
    • bottom - 요약 행은 그룹화 행의 하위 뒤에 표시됩니다. 이것이 기본값입니다.
    Note

    summaryPosition 속성은 하위 수준 요약에만 적용됩니다. 루트 수준 요약은 Grid의 아래에 항상 고정되어 표시됩니다.

    데모

    키보드 탐색

    요약 행은 다음과 같은 키보드 조작으로 탐색할 수 있습니다:

    • UP - 한 셀 위로 이동
    • DOWN - 한 셀 아래로 이동
    • LEFT - 한 셀 왼쪽으로 이동
    • RIGHT - 한 셀 오른쪽으로 이동
    • CTRL + LEFT 또는 HOME - 가장 왼쪽 셀로 이동
    • CTRL + RIGHT 또는 END - 가장 오른쪽 셀로 이동
    • TAB - 행의 다음 셀로 순차적으로 이동하고 마지막 셀에 도달하면 다음 행으로 이동
    • SHIFT + TAB - 행의 이전 셀로 순차적으로 이동하고 첫 번째 셀에 도달하면 이전 행으로 이동

    API 참조

    추가 리소스

    커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다.