Web Components 계층적 그리드 요약

    Web Components Hierarchical Grid의 Ignite UI for Web Components 요약 기능은 열 수준에서 그룹 바닥글로 작동합니다. Web Components IgcHierarchicalGrid 요약은 열 내의 데이터 유형에 따라 또는 사용자 지정 템플릿을 구현하여 미리 정의된 기본 요약 항목 집합이 있는 별도의 컨테이너에서 열 정보를 볼 수 있는 IgcHierarchicalGridComponent 강력한 기능입니다.

    Web Components 계층적 그리드 요약 개요 예

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    열 요약은 모든 열 값의 함수입니다. 필터링이 적용되지 않는 한 열 요약은 필터링된 결과 값의 함수입니다.

    IgcHierarchicalGridComponent 요약은 Ignite UI for Web Components의 열별 수준에서 활성화할 수도 있으며, 이는 필요한 열에 대해서만 활성화할 수 있음을 의미합니다. IgcHierarchicalGridComponent summaries는 열의 데이터 유형에 따라 미리 정의된 기본 요약 집합을 제공하므로 시간을 절약할 수 있습니다.

    ​string 및 boolean ​ ​dataType의 경우 다음 함수를 사용할 수 있습니다.

    • 세다

    ​number, currency 및 percent 데이터 유형의 경우 다음 함수를 사용할 수 있습니다.

    • 세다
    • 최소
    • 맥스
    • 평균
    • 합집합

    ​date 데이터 유형의 경우 다음 기능을 사용할 수 있습니다.

    • 세다
    • 가장 빠른
    • 최신

    사용 가능한 모든 열 데이터 유형은 공식 열 유형 항목에서 찾을 수 있습니다.

    IgcHierarchicalGridComponent 요약은 설정을 통해 열별로 사용할 수 있습니다. hasSummary 속성을 참. 또한 각 열에 대한 요약은 열 데이터 형식에 따라 확인된다는 점을 명심해야 합니다. 안에 IgcHierarchicalGridComponent 기본 열 데이터 형식은 다음과 같습니다. string, 그래서 당신이 원한다면 number 또는 date 특정 요약을 지정해야 합니다. dataType 속성을 number 또는 date. 요약 값은 그리드에 따라 지역화되어 표시됩니다 locale 및 열 pipeArgs.

    <igc-hierarchical-grid auto-generate="false" name="hierarchicalGrid" id="hierarchicalGrid" primary-key="ID">
    <igc-column field="Artist" header="Artist" has-summary="true"> </igc-column>
    <igc-column field="Photo" header="Photo" data-type="image"> </igc-column>
    <igc-column field="Debut" header="Debut" has-summary="true"> </igc-column>
    <igc-column field="GrammyNominations" header="Grammy Nominations" data-type="number" has-summary="true"> </igc-column>
    <igc-column field="GrammyAwards" header="Grammy Awards" data-type="number" has-summary="true"> </igc-column>
    <igc-row-island child-data-key="Albums" auto-generate="false">
        <igc-column field="Album" header="Album" data-type="string"> </igc-column>
        <igc-column field="LaunchDate" header="Launch Date" data-type="date"> </igc-column>
        <igc-column field="BillboardReview" header="Billboard Review" data-type="number" has-summary="true"> </igc-column>
        <igc-column field="USBillboard200" header="US Billboard 200" data-type="number" has-summary="true"> </igc-column>
    </igc-row-island>
</igc-hierarchical-grid>
html

    특정 열 또는 열 목록에 대한 요약을 활성화/비활성화하는 다른 방법은 public method enableSummaries /of를 disableSummaries​ ​IgcHierarchicalGridComponent 사용하는 것입니다.

    <igc-hierarchical-grid auto-generate="false" name="hierarchicalGrid" id="hierarchicalGrid" primary-key="ID">
    <igc-column field="Artist" header="Artist" has-summary="true"> </igc-column>
    <igc-column field="Photo" header="Photo" data-type="image"> </igc-column>
    <igc-column field="Debut" header="Debut" has-summary="true"> </igc-column>
    <igc-column field="GrammyNominations" header="Grammy Nominations" data-type="number" has-summary="true"> </igc-column>
    <igc-column field="GrammyAwards" header="Grammy Awards" data-type="number" has-summary="true"> </igc-column>
</igc-hierarchical-grid>
<button id="enableBtn">Enable Summary</button>
<button id="disableBtn">Disable Summary </button>
html
    constructor() {
    var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGrid;
    var enableBtn = this.enableBtn = document.getElementById('enableBtn') as HTMLButtonElement;
    var disableBtn = this.disableBtn = document.getElementById('disableBtn') as HTMLButtonElement;
    hierarchicalGrid.data = this.data;
    enableBtn.addEventListener("click", this.enableSummary);
    disableBtn.addEventListener("click", this.disableSummary);
}
ts
    public enableSummary() {
    this.hierarchicalGrid.enableSummaries([
        {fieldName: 'GrammyNominations'},
        {fieldName: 'GrammyAwards'}
    ]);
}
public disableSummary() {
    this.hierarchicalGrid.disableSummaries(['GrammyNominations']);
}
typescript

    사용자 정의 계층형 그리드 요약

    이러한 기능이 요구 사항을 충족하지 못하는 경우 특정 열에 대한 사용자 정의 요약을 제공할 수 있습니다.

    이를 달성하려면 열 데이터 유형 및 필요에 따라 기본 클래스 IgcSummaryOperand, IgcNumberSummaryOperand 또는 IgcDateSummaryOperand 중 하나를 재정의해야 합니다. 이 방법으로 기존 기능을 재정의하거나 새 기능을 추가할 수 있습니다. IgcSummaryOperand 클래스는 count 메소드에 대해서만 기본 구현을 제공합니다. IgcNumberSummaryOperand​ ​IgcSummaryOperand 확장하고 Min, Max, Sum 및 Average에 대한 구현을 제공합니다. IgcDateSummaryOperand​ ​IgcSummaryOperand 확장하고 추가로 Earliest 및 Latest 제공합니다.

    import { IgcSummaryResult, IgcSummaryOperand, IgcNumberSummaryOperand, IgcDateSummaryOperand } from 'igniteui-webcomponents-grids';

class MySummary extends IgcNumberSummaryOperand {
    constructor() {
        super();
    }

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

    예제에서 볼 수 있듯이 기본 클래스는 operate 메서드를 노출하므로 모든 기본 요약을 가져오고 결과를 수정하거나 완전히 새로운 요약 결과를 계산하도록 선택할 수 있습니다.

    이 메소드는 IgcSummaryResult 목록을 반환합니다.

    interface IgcSummaryResult {
    key: string;
    label: string;
    summaryResult: any;
}
typescript

    요약을 계산하기 위해 선택적 매개변수를 사용합니다. 아래의 모든 데이터 섹션에 액세스하는 사용자 정의 요약을 참조하세요.

    요약 행 높이를 제대로 계산하려면 계층적 그리드에서 데이터가 비어 있는 경우에도 항상 적절한 길이의 IgcSummaryResult 배열을 반환하는 Operate 메서드가 필요합니다.

    이제 열 GrammyAwards에 사용자 지정 요약을 추가해 보겠습니다. Summaries의 속성을 아래에서 만든 클래스로 설정하여 이를 달성할 것입니다.

    <igc-hierarchical-grid auto-generate="false" name="hierarchicalGrid" id="hierarchicalGrid" primary-key="ID">
    <igc-column field="Artist" header="Artist" has-summary="true"> </igc-column>
    <igc-column field="Photo" header="Photo" data-type="image"> </igc-column>
    <igc-column field="Debut" header="Debut" has-summary="true"> </igc-column>
    <igc-column field="GrammyNominations" header="Grammy Nominations" data-type="number" has-summary="true"> </igc-column>
    <igc-column field="GrammyAwards" header="Grammy Awards" data-type="number" has-summary="true" id="grammyAwards"> </igc-column>
</igc-hierarchical-grid>
html
    constructor() {
    var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGrid;
    var grammyAwards = this.grammyAwards = document.getElementById('grammyAwards') as IgcColumnComponent;
    hierarchicalGrid.data = this.data;
    grammyAwards.summaries = this.mySummary;
}
ts
    export class HierarchicalGridComponent implements OnInit {
    mySummary = MySummary;
}
typescript

    모든 데이터에 액세스하는 사용자 정의 요약

    이제 사용자 지정 열 요약 내의 모든 계층적 그리드 데이터에 액세스할 수 있습니다. SummaryOperand 메서드에는 두 개의 추가 선택적 매개 변수가 도입되었습니다 Operate. 아래 코드 스니펫에서 볼 수 있듯이 operation 메서드에는 다음 세 가지 매개 변수가 있습니다.

    • columnData - 현재 열의 값만 포함하는 배열을 제공합니다.
    • allGridData - 전체 그리드 데이터 소스를 제공합니다.
    • fieldName - 현재 열 필드
    class MySummary extends IgcNumberSummaryOperand {
    constructor() {
        super();
    }
    operate(columnData: any[], allGridData = [], fieldName?): IgcSummaryResult[] {
        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;
    }
}
typescript

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    요약 템플릿

    Summary 열 요약 결과를 컨텍스트로 제공하는 열 요약을 대상으로 합니다.

    <igc-column id="column" has-summary="true">
</igc-column>
html
    constructor() {
    var column = this.column = document.getElementById('column') as IgcColumnComponent;
    column.summaryTemplate = this.summaryTemplate;
}

public summaryTemplate = (ctx: IgcSummaryTemplateContext) => {
    return html`
        <span> My custom summary template</span>
        <span>${ ctx.implicit[0].label } - ${ ctx.implicit[0].summaryResult }</span>
    `;
}
ts

    기본 요약이 정의되면 요약 영역의 높이는 요약 수가 가장 많은 열과--ig-size 그리드에 따라 설계에 따라 계산됩니다. summaryRowHeight input 속성을 사용하여 기본값을 재정의합니다. 인수로 숫자 값이 필요하며 거짓 값을 설정하면 그리드 바닥글의 기본 크기 조정 동작이 트리거됩니다.

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Ignite UI for Web Components | CTA 배너

    Disabled Summaries

    The disabled-summaries property provides precise per-column control over the Web Components Hierarchical Grid summary feature. This property enables users to customize the summaries displayed for each column in the IgcHierarchicalGrid, ensuring that only the most relevant and meaningful data is shown. For example, you can exclude specific summary types, such as ['count', 'min', 'max'] by specifying their summary keys in an array.

    This property can also be modified dynamically at runtime through code, providing flexibility to adapt the IgcHierarchicalGrid's summaries to changing application states or user actions.

    The following examples illustrate how to use the disabled-summaries property to manage summaries for different columns and exclude specific default and custom summary types in the Web Components Hierarchical Grid:

    <!-- Disable default summaries -->
<igc-column
    field="UnitPrice"
    header="Unit Price"
    data-type="number"
    has-summary="true"
    disabled-summaries="['count', 'sum', 'average']"
>
</igc-column>

<!-- Disable custom summaries -->
<igc-column
    field="UnitsInStock"
    header="Units In Stock"
    data-type="number"
    has-summary="true"
    summaries="discontinuedSummary"
    disabled-summaries="['discontinued', 'totalDiscontinued']"
>
</igc-column>
html

    의 UnitPrice 경우, 기본 요약은 , sum와 average 같고 count 비활성화되어 있으며 다른 요약은 같고 min​ ​max 활성 상태로 유지됩니다.

    For UnitsInStock, custom summaries such as discontinued and totalDiscontinued are excluded using the disabled-summaries property.

    At runtime, summaries can also be dynamically disabled using the disabled-summaries property. For example, you can set or update the property on specific columns programmatically to adapt the displayed summaries based on user actions or application state changes.

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    요약 서식 지정

    기본적으로 기본 제공 요약 피연산자에 의해 생성된 요약 결과는 그리드 locale 및 pipeArgs 열에 따라 지역화되고 형식이 지정됩니다. 사용자 정의 피연산자를 사용하는 경우 locale 및 pipeArgs 적용되지 않습니다. 요약 결과의 기본 모양을 변경하려면 summaryFormatter 속성을 사용하여 형식을 지정할 수 있습니다.

        public dateSummaryFormat(summary: IgcSummaryResult, summaryOperand: IgcSummaryOperand): string {
        const result = summary.summaryResult;
        if (summaryOperand instanceof IgcDateSummaryOperand && summary.key !== "count" && result !== null && result !== undefined) {
            const format = new Intl.DateTimeFormat("en", { year: "numeric" });
            return format.format(new Date(result));
        }
        return result;
    }
typescript
    <igc-column id="column"></igx-column>
html
    constructor() {
    var column = this.column = document.getElementById('column') as IgcColumnComponent;
    column.summaryFormatter = this.dateSummaryFormat;
}
ts

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    키보드 탐색

    요약 행은 다음 키보드 상호 작용을 통해 탐색할 수 있습니다.

    • UP- 한 셀 위로 이동합니다.
    • DOWN- 한 셀 아래로 이동합니다.
    • 왼쪽- 한 셀 왼쪽으로 이동합니다.
    • RIGHT- 한 셀 오른쪽으로 이동합니다.
    • CTRL + LEFT 또는 HOME- 가장 왼쪽 셀로 이동합니다.
    • CTRL + RIGHT 또는 END- 가장 오른쪽 셀로 이동합니다.

    스타일링

    사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

    <igc-hierarchical-grid id="hierarchicalGrid"></igc-hierarchical-grid>
html

    그런 다음 해당 클래스에 대한 관련 CSS 속성을 설정합니다.

    #hierarchicalGrid {
    --ig-grid-summary-background-color:#e0f3ff;
    --ig-grid-summary-focus-background-color: rgba( #94d1f7, .3 );
    --ig-grid-summary-label-color: rgb(228, 27, 117);
    --ig-grid-summary-result-color: black;
}
css

    데모

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    API 참조

    추가 리소스

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