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

The Ignite UI for Angular Hierarchical Data Grid is used to display and manipulate hierarchical tabular data. Quickly bind your data with very little code or use a variety of events to customize different behaviors. This component provides a rich set of features like data selection, excel style filtering, sorting, paging, templating, column moving, column pinning, export to Excel, CSV and PDF and more. The Hierarchical Grid builds upon the Flat Grid Component and extends its functionality by allowing the users to expand or collapse the rows of the parent grid, revealing corresponding child grids, when more detailed information is needed.

Angular Hierarchical Data Grid Example

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

Getting Started with Ignite UI for Angular Hierarchical Data Grid

메모

이 구성 요소는 다음을 활용할 수 있습니다.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/grids/hierarchical-grid';
// 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/grids/hierarchical-grid';
// 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 [];
}

Now that you have the Ignite UI for Angular Hierarchical Grid module or directives imported, you can start using the igx-hierarchical-grid component.

Using the Angular Hierarchical Data Grid

데이터 바인딩

igx-hierarchical-grid derives from igx-grid and shares most of its functionality. The main difference is that it allows multiple levels of hierarchy to be defined. They are configured through a separate tag within the definition of igx-hierarchical-grid, called igx-row-island. The igx-row-island component defines the configuration for each child grid for the particular level. Multiple row islands per level are also supported. The Hierarchical Grid supports two ways of binding to 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"
        }]
    }]
}];

Each igx-row-island should specify the key of the property that holds the children data.

<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 that instead of data the user configures only the key that the igx-hierarchical-grid needs to read to set the data automatically.

Load-On-Demand 사용

Most applications are designed to load as little data as possible initially, which results in faster load times. In such cases igx-hierarchical-grid may be configured to allow user-created services to feed it with data on demand. The following configuration uses a special @Output and a newly introduced loading-in-progress template to provide a fully-featured load-on-demand.

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

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

행이 확장되기 전에 자식이 있는지 정보를 제공할 수 있는 방법이 있다면, 입력 속성을 사용할hasChildrenKey 수 있습니다. 이렇게 하면 데이터 객체에서 불리언 속성을 제공해 확장 표시기를 표시할지 알 수 있습니다.

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

속성 설정hasChildrenKey이 필수는 아니라는 점에 유의하세요. 만약 제공하지 않으면, 각 행마다 확장 표시가 표시됩니다.

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

특징

The grid features could be enabled and configured through the igx-row-island markup - they get applied for every grid that is created for it. Changing options at runtime through the row island instance changes them for each of the grids it has spawned.

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

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

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

The Selection and Navigation features work globally for the whole igx-hierarchical-grid

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

모두 축소 버튼

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

사이징

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

CRUD 작업

메모

An important difference from the flat Data Grid is that each instance for a given row island has the same transaction service instance and accumulates the same transaction log. In order to enable the CRUD functionality users should inject the IgxHierarchicalTransactionServiceFactory.

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

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

스타일링

The igxHierarchicalGrid allows styling through the Ignite UI for Angular Theme Library. The grid's grid-theme exposes a wide variety of properties, which allow the customization of all the features of the grid.

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

글로벌 테마 가져오기

To begin the customization of the hierarchical grid, you need to import the index file, where all styling functions and mixins are located.

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

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

맞춤 테마 정의

Next, create a new theme, that extends the grid-theme and accepts the parameters, required to customize the hierarchical grid as desired.

메모

There is no specific sass hierarchical grid function.

$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
);

메모

우리가 방금 한 것처럼 색상 값을 하드코딩하는 대신, andpalette 함수를 사용color 해 색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 안내는 해당 주제를 참고Palettes 해 주세요.

사용자 정의 테마 적용

The easiest way to apply your theme is with a sass @include statement in the global styles file:

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

In order for the custom theme do affect only specific component, you can move all of the styles you just defined from the global styles file to the custom component's style file (including the import of the index file). This way, due to Angular's ViewEncapsulation, your styles will be applied only to your custom component.

데모

메모

샘플은 선택된 글로벌 테마Change Theme의 영향을 받지 않습니다.

퍼포먼스 (실험)

TheigxHierarchicalGrid의 설계는 Angular 도입된 이벤트 응집 기능을 활용할 수 있게 해줍니다. 이 기능은 상호작용과 반응성 면에서 대략 더20% 나은 성능을 제공합니다. 이 기능은 메서드에서ngZoneEventCoalescing와ngZoneRunCoalescing 속성을true 단순히 설정bootstrapModule 하여 애플리케이션 수준에서 활성화할 수 있습니다:

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

메모

This is still in experimental feature for the igxHierarchicalGrid. This means that there might be some unexpected behaviors in the Hierarchical Grid. In case of encountering any such behavior, please contact us on our Github page.

메모

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

알려진 제한 사항

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

메모

igxHierarchicalGrid내부적으로 지시를 사용igxForOf 하므로 모든igxForOf 제한은 유효igxHierarchicalGrid 합니다. 자세한 내용은 igxForOf Known Issues 섹션을 참조하세요.

API 참조

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

테마 종속성

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

추가 리소스

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

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

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