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

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

Angular Hierarchical Data Grid Example

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

Getting Started with Ignite UI for Angular Hierarchical Data Grid

Note

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

Ignite UI for Angular Hierarchical Data Grid 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

ng add igniteui-angular

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 {}

또는 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 [];
}

이제 Ignite UI for Angular 가져왔으므로 igx-hierarchical-grid 구성 요소 사용을 시작할 수 있습니다.

Using the Angular Hierarchical Data Grid

Data Binding

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

Using hierarchical data

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

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"
        }]
    }]
}];

각 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>

Note

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

Using Load-On-Demand

대부분의 애플리케이션은 처음에 가능한 한 적은 데이터를 로드하도록 설계되어 있으므로 로드 시간이 더 빨라집니다. 이러한 경우 사용자 생성 서비스가 요청 시 데이터를 제공하도록 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>

//  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();
            }
        );
    }
}

// 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}`;
    }
}

Hide/Show row expand indicators

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

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

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

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

특징

그리드 기능은 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>

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

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

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

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

Collapse All Button

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

사이징

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

CRUD operations

Note

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

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

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

스타일링

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

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

Importing global theme

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

@import '~igniteui-angular/lib/core/styles/themes/index'

Defining custom theme

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

Note

특정 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
);

Defining a custom color palette

위에서 설명한 접근 방식에서는 색상 값이 하드코딩되었습니다. 또는 igx-palette 및 igx-color 기능을 사용하여 더 큰 유연성을 얻을 수 있습니다. igx-palette 제공된 기본 색상과 보조 색상을 기반으로 색상 팔레트를 생성합니다.

$black-color: #494949;
$yellow-color: #FFCD0F;

$custom-palette: palette(
 $primary: $black-color,
 $secondary: $yellow-color
);

사용자 정의 팔레트가 생성된 후 igx-color 기능을 사용하여 다양한 기본 색상과 보조 색상을 얻을 수 있습니다.

$custom-theme: grid-theme(
    $cell-active-border-color: (igx-color($custom-palette, "secondary", 500)),
    $cell-selected-background: (igx-color($custom-palette, "primary", 300)),
    $row-hover-background: (igx-color($custom-palette, "secondary", 100)),
    $row-selected-background: (igx-color($custom-palette, "primary", 100)),
    $header-background: (igx-color($custom-palette, "primary", 500)),
    $header-text-color: (igx-contrast-color($custom-palette, "primary", 500)),
    $expand-icon-color: (igx-color($custom-palette, "secondary", 500)),
    $expand-icon-hover-color: (igx-color($custom-palette, "secondary", 600)),
    $resize-line-color: (igx-color($custom-palette, "secondary", 500)),
    $row-highlight: (igx-color($custom-palette, "secondary", 500))
);

Defining custom schemas

더 나아가 스키마의 모든 이점을 갖춘 유연한 구조를 구축할 수 있습니다. 스키마는 테마의 레시피입니다. 모든 구성요소에 대해 제공되는 두 개의 사전 정의된 스키마 중 하나를 확장하십시오. 우리의 경우 $_light_grid 사용하겠습니다.

$custom-grid-schema: extend($_light-grid,(
    cell-active-border-color: (igx-color:('secondary', 500)),
    cell-selected-background: (igx-color:('primary', 300)),
    row-hover-background: (igx-color:('secondary', 100)),
    row-selected-background: (igx-color:('primary', 100)),
    header-background: (igx-color:('primary', 500)),
    header-text-color: (igx-contrast-color:('primary', 500)),
    expand-icon-color: (igx-color:('secondary', 500)),
    expand-icon-hover-color: (igx-color:('secondary', 600)),
    resize-line-color: (igx-color:('secondary', 500)),
    row-highlight: (igx-color:('secondary', 500))
));

사용자 정의 스키마를 적용하려면 light 또는 dark 전역을 확장해야 합니다. 전체 프로세스는 실제로 구성 요소에 사용자 정의 스키마를 제공하고 이를 나중에 해당 구성 요소 테마에 추가하는 것입니다.

$my-custom-schema: extend($light-schema, (
    igx-grid: $custom-grid-schema
));

$custom-theme: grid-theme(
    $palette: $custom-palette,
    $schema: $my-custom-schema
);

Applying the custom theme

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

@include grid($custom-theme);

Scoped component theme

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

이렇게 하면 Angular의 ViewEncapsulation으로 인해 스타일이 사용자 정의 구성 요소에만 적용됩니다.

Note

구성 요소가 Emulated ViewEncapsulation을 사용하는 경우 그리드 스타일을 지정하려면::ng-deep 사용하여 이 캡슐화를 관통해야 합니다.

Note

문을 a 안에 넣습니다.:host 스타일이 요소에 영향을 미치지 않도록 하는 선택기 밖의 우리의 구성요소:

:host {
    ::ng-deep {
        @include grid($custom-theme);
    }
}

Demo

Note

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

Performance (Experimental)

​igxHierarchicalGrid의 설계를 통해 Angular에 도입된 이벤트 병합 기능을 활용할 수 있습니다. 이 기능을 사용하면 상호 작용 및 응답성 측면에서 약 20% 정도 향상된 성능을 얻을 수 있습니다. 이 기능은 bootstrapModule 메소드에서 ngZoneEventCoalescing 및 ngZoneRunCoalescing 속성을 true로 설정하여 애플리케이션 수준에서 활성화할 수 있습니다.

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

Note

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

Note

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

Known Limitations

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

Note

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

API References

• IgxHierarchicalGridComponent
• IgxRowIslandComponent
• IgxGrid구성 요소
• IgxGrid구성 요소 스타일
• IgxColumnComponent
• IgxHierarchicalGridRow
• IgxGridCell

Theming Dependencies

• IgxIcon 테마
• IgxInputGroup 테마
• IgxChip 테마
• IgxRipple 테마
• IgxButton 테마
• Igx오버레이 테마
• IgxDropDown 테마
• IgxCalendar 테마
• IgxActionStrip 테마
• IgxSnackBar 테마
• IgxBadge 테마

Additional Resources

• 그리드 크기 조정
• 가상화 및 성능
• 페이징
• 필터링
• 정렬
• 요약
• 열 이동
• 열 고정
• 열 크기 조정
• 선택

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

• Ignite UI for Angular 포럼
• Ignite UI for Angular GitHub