Angular Grid Selection-Based Data Aggregation

    뒤에 설명된 샘플을 통해 사용자 정의 요약 기능과 함께 다중 선택이 사용되어 그리드 바닥글에서 선택한 값을 기반으로 집계를 표시하는 방법을 확인할 수 있습니다.

    주제 개요

    선택 기반 집계 기능을 구현하려면 Grid Summaries과 함께 Grid Selection 기능을 사용할 수 있습니다.
    요약을 사용하면 열 데이터 유형 및 요구 사항에 따라 기본 클래스 IgxSummaryOperand, IgxNumberSummaryOperand 또는 IgxDateSummaryOperand 중 하나를 확장하여 기본 요약 기능을 사용자 정의할 수 있습니다.

    선택

    선택한 그리드 범위의 데이터 작업을 시작하려면 그리드 선택의 변경 사항을 알리는 이벤트를 구독해야 합니다. 이는 selected 이벤트와 rangeSelected 이벤트를 구독하여 수행할 수 있습니다. 선택 기능은 단일 셀 선택과 셀 범위 선택을 구별하므로 두 가지 모두에 바인딩해야 합니다.

    이벤트 구독 로직에서 그리드의 getSelectedData 함수를 사용하여 선택한 데이터를 추출하고 선택한 데이터를 사용자 정의 요약 피연산자에 전달할 수 있습니다.

    요약

    사용자 정의 요약 클래스 내에서는 그리드의 데이터 유형을 구별해야 합니다. 예를 들어 아래 시나리오에는 사용자 정의 요약에 적합한 데이터 유형의 네 가지 열이 있습니다. 이는 단가, 재고 수량, 단종 상태 및 주문 날짜입니다.
    IgxSummaryOperand의 파생 클래스의 operate 메소드는 데이터 유형에 따라 다양한 카테고리로 분류하여 데이터를 처리하는 곳입니다.

    const numberData = data.filter(rec => typeof rec === "number");
    const boolData = data.filter(rec => typeof rec === "boolean");
    const dates = data.filter(rec => isDate(rec));
    typescript

    Bear in mind, that isDate is a custom function.

    데이터 유형을 적절하게 그룹화한 후 집계 자체를 진행할 수 있습니다. 이러한 이유로 IgxNumberSummaryOperandIgxDateSummaryOperand의 이미 노출된 메서드를 사용할 수 있습니다. 그런 다음 집계된 데이터를 동일한 배열에 넣어야 하며 이는 템플릿에 반환됩니다.
    데이터 시각화를 위해 <igx-grid-footer>를 사용할 수 있습니다. 이는 custom-summaries 클래스와 함께 요약의 자연스러운 모양을 제공합니다.

    데모

    현재 선택한 범위의 요약을 보려면 선택 항목을 변경하세요.

    EXAMPLE
    TS
    HTML
    SCSS

    이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

    API 참조

    App Builder | CTA 배너

    추가 리소스

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