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

Ignite UI for Angular 계층적 데이터 그리드는 계층적 표 형태 데이터를 표시하고 조작하는 데 사용됩니다. 코드를 거의 사용하지 않고 빠르게 데이터를 묶거나 다양한 이벤트를 사용해 다양한 동작을 맞춤화할 수 있습니다. 이 구성 요소는 데이터 선택, 엑셀 스타일 필터링, 정렬, 페이징, 템플릿, 열 이동, 열 고정, 엑셀, CSV, PDF 내보내기 등 다양한 기능을 제공합니다. 계층적 그리드는 평면 그리드 컴포넌트를 기반으로 하며, 사용자가 부모 그리드의 행을 확장하거나 접을 수 있도록 기능을 확장하여 더 상세한 정보가 필요할 때 해당 자식 그리드를 공개할 수 있게 합니다.

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

이제 Ignite UI for Angular 계층적 격자 모듈이나 지시를 가져왔으니, 컴포넌트igx-hierarchical-grid 사용을 시작할 수 있습니다.

Using the Angular Hierarchical Data Grid

데이터 바인딩

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사용자가 데이터를 자동으로 설정하려면 읽어야 하는 설정만key​igx-hierarchical-grid 하는 것이 아니라,

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 Theme Library을 통해 가능합니다. 그리드는grid-theme 다양한 특성을 노출시켜 모든 기능을 맞춤화할 수 있게 합니다.

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

Importing global theme

계층 그리드의 커스터마이징을 시작하려면, 모든 스타일링 기능과 믹싱이 있는 파일을 가져와index야 합니다.

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

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @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
);

Note

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

Applying the custom theme

테마를 적용하는 가장 쉬운 방법은 글로벌 스타일 파일에 있는 문장을 사용하는sass @include 것입니다:

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

커스텀 테마가 특정 컴포넌트에만 영향을 미치려면, 방금 정의한 모든 스타일을 전역 스타일 파일에서 커스텀 컴포넌트의 스타일 파일로 옮길 수 있습니다(파일 가져오기index도 포함해서요). 이렇게 하면 AngularViewEncapsulation 때문에 스타일이 오직 커스텀 컴포넌트에만 적용됩니다.

Demo

Note

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

Performance (Experimental)

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

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

Note

이것은 아직 실험 단계에 있습니다.igxHierarchicalGrid 이는 계층적 그리드에서 예상치 못한 동작이 있을 수 있음을 의미합니다. 이런 현상이 발생하면 저희 깃허브 페이지에서 연락해 주세요.

Note

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

Known Limitations

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

Note

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

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 포럼
• ​GitHub Ignite UI for Angular