Angular 계층적 데이터 그리드 구성 요소 개요

    Ignite UI for Angular Hierarchical Data Grid는 계층적 테이블 형식 데이터를 표시하고 조작하는 데 사용됩니다. 아주 적은 코드로 데이터를 빠르게 바인딩하거나 다양한 이벤트를 사용하여 다양한 동작을 사용자 지정할 수 있습니다. 이 구성 요소는 데이터 선택, Excel 스타일 필터링, 정렬, 페이징, 템플릿, 열 이동, 열 고정, Excel 및 CSV로 내보내기 등과 같은 다양한 기능을 제공합니다. Hierarchical Grid는 Flat Grid Component를 기반으로 하며, 사용자가 부모 그리드의 행을 확장하거나 축소할 수 있도록 하여 기능을 확장하고, 더 자세한 정보가 필요할 때 해당 자식 그리드를 표시합니다.

    Angular 계층적 데이터 그리드 예제

    이 각도 그리드 예에서는 사용자가 계층적 데이터 세트를 시각화하고 셀 템플릿을 사용하여 Sparkline과 같은 다른 시각적 구성 요소를 추가하는 방법을 볼 수 있습니다.

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

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

    Ignite UI for Angular Hierarchical Data Grid 시작하기

    이 구성 요소는 HammerModule ​ ​필요. 터치 조작이 예상대로 작동하도록 응용 프로그램의 루트 모듈로 가져올 수 있습니다..

    Ignite UI for Angular Hierarchical Data Grid 구성 요소를 시작하려면 먼저 Ignite UI for Angular를 설치해야 합니다. 기존 Angular 응용 프로그램에서 다음 명령을 입력합니다.

    ng add igniteui-angular
cmd

    Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

    다음 단계는 IgxHierarchicalGridModule 당신의 app.module.ts 파일.

    // app.module.ts

import { IgxHierarchicalGridModule } from 'igniteui-angular';
// import { IgxHierarchicalGridModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [
        ...
        IgxHierarchicalGridModule,
        ...
    ]
})
export class AppModule {}
typescript

    또는 16.0.0부터 IgxHierarchicalGridComponent를 독립 실행형 종속성으로 가져오거나 IGX_HIERARCHICAL_GRID_DIRECTIVES 토큰을 사용하여 구성 요소와 모든 지원 구성 요소 및 지시문을 가져올 수 있습니다.

    // home.component.ts

import { IGX_HIERARCHICAL_GRID_DIRECTIVES } from 'igniteui-angular';
// import { IGX_HIERARCHICAL_GRID_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-hierarchical-grid #hierarchicalGrid [data]="singers" [autoGenerate]="true">
        <igx-row-island [key]="'Albums'" [autoGenerate]="true">
            <igx-row-island [key]="'Songs'" [autoGenerate]="true">
            </igx-row-island>
        </igx-row-island>
        <igx-row-island [key]="'Tours'" [autoGenerate]="true">
        </igx-row-island>
    </igx-hierarchical-grid>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_HIERARCHICAL_GRID_DIRECTIVES]
    /* or imports: [IgxHierarchicalGridComponent, IgxRowIslandComponent] */
})
export class HomeComponent {
    public singers: Artist [];
}
typescript

    이제 Ignite UI for Angular Hierarchical Grid 모듈 또는 지시문을 가져왔으므로 구성 요소를 사용할 igx-hierarchical-grid 수 있습니다.

    Angular 계층형 데이터 그리드 사용

    데이터 바인딩

    igx-hierarchical-grid​ ​igx-grid에서 파생되며 대부분의 기능을 공유합니다. 주요 차이점은 여러 수준의 계층 구조를 정의할 수 있다는 것입니다. 이는 igx-hierarchical-grid 정의 내에서 igx-row-island 라고 하는 별도의 태그를 통해 구성됩니다. igx-row-island 구성 요소는 특정 레벨의 각 하위 그리드에 대한 구성을 정의합니다. 레벨당 다중 행 아일랜드도 지원됩니다. 계층적 그리드는 데이터에 바인딩하는 두 가지 방법을 지원합니다.

    계층적 데이터 사용

    애플리케이션이 전체 계층 데이터를 개체의 하위 배열을 참조하는 개체 배열로 로드하는 경우 계층 그리드는 이를 읽고 자동으로 바인딩하도록 구성할 수 있습니다. 다음은 적절하게 구조화된 계층적 데이터 원본의 예입니다.

    export const singers = [{
    "Artist": "Naomí Yepes",
    "Photo": "assets/images/hgrid/naomi.png",
    "Debut": "2011",
    "Grammy Nominations": 6,
    "Grammy Awards": 0,
    "Tours": [{
        "Tour": "Faithful Tour",
        "Started on": "Sep-12",
        "Location": "Worldwide",
        "Headliner": "NO",
        "Toured by": "Naomí Yepes"
    }],
    "Albums": [{
        "Album": "Dream Driven",
        "Launch Date": new Date("August 25, 2014"),
        "Billboard Review": "81",
        "US Billboard 200": "1",
        "Artist": "Naomí Yepes",
        "Songs": [{
            "No.": "1",
            "Title": "Intro",
            "Released": "*",
            "Genre": "*",
            "Album": "Dream Driven"
        }]
    }]
}];
javascript

    각 igx-row-island 하위 데이터를 보유하는 속성의 키를 지정해야 합니다.

    <igx-hierarchical-grid #hierarchicalGrid [data]="singers" [autoGenerate]="true">
    <igx-row-island [key]="'Albums'" [autoGenerate]="true">
        <igx-row-island [key]="'Songs'" [autoGenerate]="true">
        </igx-row-island>
    </igx-row-island>
    <igx-row-island [key]="'Tours'" [autoGenerate]="true">
    </igx-row-island>
</igx-hierarchical-grid>
html

    ​data 대신 사용자는 데이터를 자동으로 설정하기 위해 igx-hierarchical-grid 읽어야 하는 key 구성합니다.

    로드 온디맨드 사용

    대부분의 애플리케이션은 처음에 가능한 한 적은 데이터를 로드하도록 설계되어 있으므로 로드 시간이 더 빨라집니다. 이러한 경우 사용자 생성 서비스가 요청 시 데이터를 제공하도록 igx-hierarchical-grid 구성할 수 있습니다. 다음 구성은 특별한 @Output과 새로 도입된 진행 중인 로드 템플릿을 사용하여 모든 기능을 갖춘 요청 시 로드를 제공합니다.

    <!-- hierarchicalGridSample.component.html -->

<igx-hierarchical-grid #hGrid [primaryKey]="'CustomerID'" [autoGenerate]="true" [height]="'600px'" [width]="'100%'">
    <igx-row-island [key]="'Orders'" [primaryKey]="'OrderID'" [autoGenerate]="true"  (gridCreated)="gridCreated($event, 'CustomerID')">
        <igx-row-island [key]="'Order_Details'" [primaryKey]="'ProductID'" [autoGenerate]="true" (gridCreated)="gridCreated($event, 'OrderID')">
        </igx-row-island>
    </igx-row-island>
</igx-hierarchical-grid>
html
    //  hierarchicalGridSample.component.ts

@Component({...})
export class HierarchicalGridLoDSampleComponent implements AfterViewInit {
    @ViewChild("hGrid")
    public hGrid: IgxHierarchicalGridComponent;

    constructor(private remoteService: RemoteLoDService) { }

    public ngAfterViewInit() {
        this.hGrid.isLoading = true;
        this.remoteService.getData({ parentID: null, rootLevel: true, key: "Customers" }).subscribe((data) => {
            this.hGrid.isLoading = false;
            this.hGrid.data = data;
            this.hGrid.cdr.detectChanges();
        });
    }

    public gridCreated(event: IGridCreatedEventArgs, _parentKey: string) {
        const dataState = {
            key: event.owner.key,
            parentID: event.parentID,
            parentKey: _parentKey,
            rootLevel: false
        };
        event.grid.isLoading = true;
        this.remoteService.getData(dataState).subscribe(
            (data) => {
                event.grid.isLoading = false;
                event.grid.data = data;
                event.grid.cdr.detectChanges();
            }
        );
    }
}
typescript
    // remote-load-on-demand.service.ts

@Injectable()
export class RemoteLoDService {
    public url = `https://services.odata.org/V4/Northwind/Northwind.svc/`;

    constructor(private http: HttpClient) { }

    public getData(dataState?: any): Observable<any[]> {
        return this.http.get(this.buildUrl(dataState)).pipe(
            map((response) => response["value"])
        );
    }

    public buildUrl(dataState) {
        let qS = "";
        if (dataState) {
            qS += `${dataState.key}?`;

            if (!dataState.rootLevel) {
                if (typeof dataState.parentID === "string") {
                    qS += `$filter=${dataState.parentKey} eq '${dataState.parentID}'`;
                } else {
                    qS += `$filter=${dataState.parentKey} eq ${dataState.parentID}`;
                }
            }
        }
        return `${this.url}${qS}`;
    }
}
typescript

    행 확장 표시기 숨기기/표시

    확장 전에 행에 하위 항목이 있는지 여부에 대한 정보를 제공할 수 있는 방법이 있는 경우 hasChildrenKey 입력 속성을 사용할 수 있습니다. 이 방법으로 확장 표시기를 표시해야 하는지 여부를 나타내는 데이터 객체의 부울 속성을 제공할 수 있습니다.

    <igx-hierarchical-grid #grid [data]="data" primaryKey="ID" hasChildrenKey="hasChildren">
        ...
</igx-hierarchical-grid>
html

    ​hasChildrenKey 속성을 설정할 필요는 없습니다. 제공하지 않을 경우 각 행마다 확장 표시기가 표시됩니다.

    또한 헤더 확장/모두 축소 표시기를 표시하거나 숨기려면 showExpandAll 속성을 사용할 수 있습니다. 이 UI는 성능상의 이유로 기본적으로 비활성화되어 있으며 대용량 데이터가 있는 그리드나 온디맨드 로드가 있는 그리드에서는 활성화하지 않는 것이 좋습니다.

    App Builder | CTA 배너

    특징

    그리드 기능은 igx-row-island 마크업을 통해 활성화하고 구성할 수 있습니다. 해당 기능은 생성된 모든 그리드에 적용됩니다. 행 아일랜드 인스턴스를 통해 런타임에 옵션을 변경하면 생성된 각 그리드에 대해 옵션이 변경됩니다.

    <igx-hierarchical-grid [data]="localData" [autoGenerate]="false"
    [allowFiltering]='true' [height]="'600px'" [width]="'800px'" #hGrid>
    <igx-column field="ID" [pinned]="true" [filterable]='true'></igx-column>
    <igx-column-group header="Information">
        <igx-column field="ChildLevels"></igx-column>
        <igx-column field="ProductName" hasSummary='true'></igx-column>
    </igx-column-group>
    <igx-row-island [key]="'childData'" [autoGenerate]="false" [rowSelection]="'multiple'" #layout1>
        <igx-column field="ID" [hasSummary]='true' [dataType]="'number'"></igx-column>
        <igx-column-group header="Information2">
            <igx-column field="ChildLevels"></igx-column>
            <igx-column field="ProductName"></igx-column>
        </igx-column-group>
        <igx-paginator *igxPaginator [perPage]="5"></igx-paginator>
    </igx-row-island>
    <igx-paginator>
    </igx-paginator>
</igx-hierarchical-grid>
html

    다음 그리드 기능은 그리드 수준별로 작동합니다. 즉, 각 그리드 인스턴스가 나머지 그리드와 독립적으로 해당 기능을 관리합니다.

    • 정렬
    • 필터링
    • 페이징
    • 다중 열 헤더
    • 숨김
    • 고정
    • 움직이는
    • 요약
    • 찾다

    선택 및 탐색 기능은 전체 igx-hierarchical-grid에 대해 전역적으로 작동합니다.

    • 선택 선택에서는 두 개의 서로 다른 하위 그리드에 대해 선택한 셀이 동시에 표시되는 것을 허용하지 않습니다.
    • 탐색 위/아래로 탐색할 때 다음/이전 요소가 하위 그리드인 경우 관련 하위 그리드에서 탐색이 계속되며 관련 셀이 선택되고 초점이 맞춰진 것으로 표시됩니다. 하위 셀이 현재 표시되는 뷰 포트 외부에 있는 경우 선택한 셀이 항상 표시되도록 뷰로 스크롤됩니다.

    모두 축소 버튼

    계층적 그리드를 사용하면 사용자는 왼쪽 상단 모서리에 있는 "모두 축소" 버튼을 눌러 현재 확장된 모든 행을 편리하게 축소할 수 있습니다. 또한 다른 그리드를 포함하고 계층적 그리드 자체인 모든 하위 그리드에도 다음과 같은 버튼이 있습니다. 이 방법으로 사용자는 계층 구조에서 지정된 그리드만 축소할 수 있습니다.

    사이징

    ​그리드 크기 조정 항목을 참조하세요.

    CRUD 작업

    플랫 데이터 그리드와의 중요한 차이점은 지정된 행 아일랜드의 각 인스턴스가 동일한 트랜잭션 서비스 인스턴스를 가지며 동일한 트랜잭션 로그를 축적한다는 것입니다. CRUD 기능을 활성화하려면 사용자가 IgxHierarchicalTransactionServiceFactory를 삽입해야 합니다.

    CRUD API 메서드 호출은 여전히 각 개별 그리드 인스턴스를 통해 수행되어야 합니다.

    ​igxGrid를 사용하여 CRUD 작업을 빌드하는 방법 주제를 확인하세요.

    스타일링

    igxHierarchicalGrid를 통해 스타일을 지정할 수 있습니다 Ignite UI for Angular Theme Library. 그리드는 grid-theme 그리드의 모든 기능을 사용자 지정할 수 있는 다양한 속성을 노출합니다.

    아래 단계에서는 igxHierarchicalGrid 스타일을 사용자 정의하는 단계를 진행합니다.

    글로벌 테마 가져오기

    계층형 그리드의 사용자 정의를 시작하려면 모든 스타일링 기능과 믹스인이 있는 index 파일을 가져와야 합니다.

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss

    맞춤 테마 정의

    다음으로, grid-theme 확장하고 원하는 대로 계층적 그리드를 사용자 정의하는 데 필요한 매개변수를 허용하는 새 테마를 만듭니다.

    특정 sass 적 그리드 기능은 없습니다.

    $custom-theme: grid-theme(
  $cell-active-border-color: #ffcd0f,
  $cell-selected-background: #6f6f6f,
  $row-hover-background: #f8e495,
  $row-selected-background: #8d8d8d,
  $header-background: #494949,
  $header-text-color: #fff,
  $expand-icon-color: #ffcd0f,
  $expand-icon-hover-color: #e0b710,
  $resize-line-color: #ffcd0f,
  $row-highlight: #ffcd0f
);
scss

    우리가 방금 한 것처럼 색상 값을 하드 코딩하는 대신, and color 함수를 사용하여 palette 색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 지침은 항목을 참조하십시오 Palettes.

    사용자 정의 테마 적용

    테마를 적용하는 가장 쉬운 방법은 전역 스타일 파일에 sass ​ ​@include 문을 사용하는 것입니다.

    @include css-vars($custom-theme);
scss

    사용자 정의 테마가 특정 구성 요소에만 영향을 미치도록 하려면 전역 스타일 파일에서 방금 정의한 모든 스타일을 사용자 정의 구성 요소의 스타일 파일(파일 가져오기 index 포함)로 이동할 수 있습니다. 이렇게 하면 Angular ViewEncapsulation 때문에 스타일이 사용자 지정 구성 요소에만 적용됩니다.

    데모

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    샘플은 Change Theme에서 선택한 전역 테마의 영향을 받지 않습니다.

    성능(실험적)

    ​igxHierarchicalGrid의 디자인은 Angular에서 도입한 이벤트 통합 기능을 활용할 수 있게 해줍니다. 이 기능은 상호작용과 반응성 측면에서 약 20%의 향상된 성능을 제공합니다. 이 기능은 bootstrapModule 메서드에서 ngZoneEventCoalescing 및 ngZoneRunCoalescing 속성을 true로 설정하기만 하면 애플리케이션 수준에서 활성화할 수 있습니다.

    platformBrowserDynamic()
  .bootstrapModule(AppModule, { ngZoneEventCoalescing: true, ngZoneRunCoalescing: true })
  .catch(err => console.error(err));
typescript

    이는 igxHierarchicalGrid에 대한 실험적 기능입니다. 이는 계층적 그리드에 예상치 못한 동작이 있을 수 있음을 의미합니다. 그러한 행동이 발생하는 경우 Github 페이지로 문의해 주세요.

    이를 활성화하면 igxHierarchicalGrid와 관련이 없는 Angular 애플리케이션의 다른 부분에 영향을 미칠 수 있습니다.

    알려진 제한 사항

    한정 설명
    그룹화 기준 그룹화 기준 기능은 계층형 그리드에서 지원되지 않습니다.

    igxHierarchicalGrid 내부적으로 igxForOf 지시어를 사용하므로 모든 igxForOf 제한 사항은 igxHierarchicalGrid에 유효합니다. 자세한 내용은 igxForOf 알려진 문제 섹션을 참조하세요.

    API 참조

    테마 종속성

    추가 리소스

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