Angular Tree Grid 구성 요소 개요

The Ignite UI for Angular Tree Grid is used to display and manipulate hierarchical or flat self-referencing 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, grouping, templating, column moving, column pinning, export to Excel, CSV and PDF, and more.

Angular 트리 그리드 예시

In this example, you can see how users can display hierarchical data. We have included filtering and sorting options, pinning and hiding, row selection, export to excel, csv and pdf, and cell templating that uses our Sparkline component. In addition, you can see an example of custom pagination with Angular Pagination.

트리 그리드 Ignite UI for Angular 시작하는 방법

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

ng add igniteui-angular

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

다음 단계는 다음 단계를 가져오는 것입니다.IgxTreeGridModule 당신의 app.module.ts 파일.

// app.module.ts

import { IgxTreeGridModule } from 'igniteui-angular/grids/tree-grid';
// import { IgxTreeGridModule } from '@infragistics/igniteui-angular'; for licensed package

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

또는16.0.0 독립 실행형 의존성으로 가져오IgxTreeGridComponent 거나, 토큰을IGX_TREE_GRID_DIRECTIVES 사용해 컴포넌트와 그 지원 컴포넌트, 명령어를 가져올 수도 있습니다.

// home.component.ts

import { IGX_TREE_GRID_DIRECTIVES } from 'igniteui-angular/grids/tree-grid';
// import { IGX_TREE_GRID_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igx-tree-grid [data]="data"></igx-tree-grid>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_TREE_GRID_DIRECTIVES]
    /* or imports: [IgxTreeGridComponent] */
})
export class HomeComponent {
    public data: Employee [];
}

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

Angular 트리 그리드 사용

메모

이 구성 요소는 다음을 활용할 수 있습니다.HammerModule 필요. 터치 상호작용이 기대대로 작동하도록 애플리케이션의 루트 모듈에서 가져올 수 있습니다..

The IgxTreeGridComponent shares a lot of features with the IgxGridComponent, but it also adds the ability to display its data hierarchically. In order to achieve this, the IgxTreeGridComponent provides us with a couple of ways to define the relations among our data objects - by using a child collection for every data object or by using primary and foreign keys for every data object.

트리 셀

트리 그리드의 계층 구조(하위 컬렉션 또는 기본 및 외래 키)를 구축하는 데 사용되는 옵션에 관계없이 트리 그리드의 행은 두 가지 유형의 셀로 구성됩니다.

IgxGridCell - Ordinary cell that contains a value.
IgxGridCell - Tree cell that contains a value, an expand/collapse indicator and an indentation div element, which is based on the level of the cell's row. The level of a row component can be accessed through the level property of its inner treeRow.

메모

각 행에는 하나의 트리 셀만 있을 수 있지만 일반 셀은 여러 개(또는 없음) 있을 수 있습니다.

초기 확장 깊이

Initially the tree grid will expand all node levels and show them. This behavior can be configured using the expansionDepth property. By default its value is Infinity which means all node levels will be expanded. You may control the initial expansion depth by setting this property to a numeric value. For example 0 will show only root level nodes, 1 will show root level nodes and their child nodes and so on.

아동 소장품

When we are using the child collection option, every data object contains a child collection, that is populated with items of the same type as the parent data object. This way every record in our tree grid will have a direct reference to any of its children. In this case the data property of our tree grid that contains the original data source will be a hierarchically defined collection.

이 샘플에서는 다음 컬렉션 구조를 사용해 보겠습니다.

// Sample Employee Data

export const EMPLOYEE_DATA = [
    {
        Name: "Johnathan Winchester",
        ID: 1,
        HireDate: new Date(2008, 3, 20),
        Age: 55,
        Employees: [
            {
                Name: "Michael Burke",
                ID: 3,
                HireDate: new Date(2011, 6, 3),
                Age: 43,
                Employees: []
            },
            {
                Name: "Thomas Anderson"
                ID: 2,
                HireDate: new Date(2009, 6, 19),
                Age: 29,
                Employees: []
            },
            ...
        ]
    },
    ...
]

Now let's start by importing our data collection and binding it to the data input of our tree grid.

<!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="localData">
</igx-tree-grid>

In order for the IgxTreeGridComponent to build the hierarchy, we will have to set its childDataKey property to the name of the child collection that is used in each of our data objects. In our case that will be the Employees collection. In addition, we will disable the automatic column generation and define them manually by matching them to the actual properties of our data objects. (The Employees collection will be automatically used for the hierarchy, so there is no need to include it in the columns' definitions.)

<!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="localData" childDataKey="Employees"
               [autoGenerate]="false">
    <igx-column field="Name" dataType="string"></igx-column>
    <igx-column field="HireDate" dataType="date"></igx-column>
    <igx-column field="Age" dataType="number"></igx-column>
</igx-tree-grid>

We will now enable the row selection and paging features of the tree grid by using the rowSelection and the paging properties. We will also enable the summaries feature on the first column and the filtering, sorting, editing, moving and resizing features for each of our columns.

<!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="localData" childDataKey="Employees"
               [autoGenerate]="false" [rowSelection]="'multiple'" [allowFiltering]="true" [moving]="true">
    <igx-column field="Name" dataType="string" [sortable]="true" [editable]="true" [resizable]="true"
                [hasSummary]="true"></igx-column>
    <igx-column field="HireDate" dataType="date" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-column field="Age" dataType="number" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-paginator>
    </igx-paginator>
</igx-tree-grid>

Finally, we will enable the toolbar of our tree grid, along with the column hiding, column pinning and exporting features by using the IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent and IgxGridToolbarExporterComponent respectively.

<!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="localData" childDataKey="Employees"
               [autoGenerate]="false" [rowSelection]="'multiple'" [allowFiltering]="true" [moving]="true">
    <igx-grid-toolbar>
            <igx-grid-toolbar-title>Employees</igx-grid-toolbar-title>
            <igx-grid-toolbar-actions>
                <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
                <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
                <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
            </igx-grid-toolbar-actions>
    </igx-grid-toolbar>
    <igx-column field="Name" dataType="string" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-column field="HireDate" dataType="date" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-column field="Age" dataType="number" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-paginator [perPage]="6">
    </igx-paginator>
</igx-tree-grid>

이 글의 시작부분에 있는 Angular Tree Grid Example 섹션에서 위 코드의 결과를 볼 수 있습니다.

기본 키 및 외래키

When we are using the primary and foreign keys option, every data object contains a primary key and a foreign key. The primary key is the unique identifier of the current data object and the foreign key is the unique identifier of its parent. In this case the data property of our tree grid that contains the original data source will be a flat collection.

다음은 기본 키와 외래 키 관계로 정의된 단순 컬렉션을 포함하는 구성 요소의 예입니다.

// treeGridSample.component.ts

@Component({...})
export class MyComponent implements OnInit {

    public data: any[];

    constructor() { }

    public ngOnInit() {
        // Primary and Foreign keys sample data
        this.data = [
            { ID: 1, ParentID: -1, Name: "Casey Houston", JobTitle: "Vice President", Age: 32 },
            { ID: 2, ParentID: 1, Name: "Gilberto Todd", JobTitle: "Director", Age: 41 },
            { ID: 3, ParentID: 2, Name: "Tanya Bennett", JobTitle: "Director", Age: 29 },
            { ID: 4, ParentID: 2, Name: "Jack Simon", JobTitle: "Software Developer", Age: 33 },
            { ID: 5, ParentID: 8, Name: "Celia Martinez", JobTitle: "Senior Software Developer", Age: 44 },
            { ID: 6, ParentID: -1, Name: "Erma Walsh", JobTitle: "CEO", Age: 52 },
            { ID: 7, ParentID: 2, Name: "Debra Morton", JobTitle: "Associate Software Developer", Age: 35 },
            { ID: 8, ParentID: 10, Name: "Erika Wells", JobTitle: "Software Development Team Lead", Age: 50 },
            { ID: 9, ParentID: 8, Name: "Leslie Hansen", JobTitle: "Associate Software Developer", Age: 28 },
            { ID: 10, ParentID: -1, Name: "Eduardo Ramirez", JobTitle: "Development Manager", Age: 53 }
        ];
    }
}

위의 샘플 데이터에서 모든 레코드에는 ID, ParentID 및 이름, JobTitle 및 Age와 같은 일부 추가 속성이 있습니다. 앞서 언급했듯이 레코드 ID는 고유해야 합니다. ParentID에는 상위 노드의 ID가 포함됩니다. 행에 트리 그리드의 어떤 행과도 일치하지 않는 ParentID가 있는 경우 이는 이 행이 루트 행임을 의미합니다.

The parent-child relation is configured using the tree grid's primaryKey and foreignKey properties.

다음은 위의 플랫 컬렉션에 정의된 데이터를 표시하도록 트리 그리드를 구성하는 방법을 보여주는 구성 요소의 템플릿입니다.

<!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID"
    [autoGenerate]="false">
    <igx-column field="Name" dataType="string"></igx-column>
    <igx-column field="JobTitle" dataType="string"></igx-column>
    <igx-column field="Age" dataType="number"></igx-column>
</igx-tree-grid>

In addition we will enable the row selection feature of the tree grid by using the rowSelection property and also the filtering, sorting, editing, moving and resizing features for each of our columns.

<!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID"
    [autoGenerate]="false" [rowSelection]="'multiple'" [allowFiltering]="true" [moving]="true">
    <igx-column field="Name" dataType="string" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-column field="JobTitle" dataType="string" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-column field="Age" dataType="number" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
</igx-tree-grid>

최종 결과는 다음과 같습니다.

지속성과 통합

트리 셀의 들여쓰기는 필터링, 정렬, 페이징과 같은 다른 트리 그리드 기능 전반에 걸쳐 유지됩니다.

열에 정렬이 적용되면 데이터 행이 수준별로 정렬됩니다. 즉, 루트 수준 행은 해당 하위 항목과 독립적으로 정렬됩니다. 각각의 하위 컬렉션도 각각 독립적으로 정렬됩니다.
The first column (the one that has a visibleIndex of 0) is always the tree column.
The column that ends up with a visibleIndex of 0 after operations like column pinning, column hiding and column moving becomes the tree column.
내보낸 Excel 워크시트는 트리 그리드 자체에 그룹화된 레코드를 그룹화하여 계층 구조를 반영합니다. 모든 레코드 확장 상태도 유지되고 반영됩니다.
CSV로 내보낼 때 레벨 및 확장 상태가 무시되고 모든 데이터가 플랫으로 내보내집니다.

Angular 트리 격자 크기

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

스타일링

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

To get started with styling the Tree Grid, we need to import the index file, where all the theme functions and component mixins live:

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

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

Following the simplest approach, we create a new theme that extends the grid-theme and accepts the parameters, required to customize the tree grid as desired.

메모

There is no specific sass tree 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 해 주세요.

마지막 단계는 애플리케이션에 구성 요소 테마를 포함하는 것입니다.

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

Angular 트리 그리드 스타일링 데모

메모

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

퍼포먼스 (실험)

TheigxTreeGrid의 설계는 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 igxTreeGrid. This means that there might be some unexpected behaviors in the Tree Grid. In case of encountering any such behavior, please contact us on our Github page.

메모

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

알려진 제한 사항

한정	설명
트리 셀 템플릿	트리 셀을 템플릿으로 만들 때 셀 경계 외부에 있는 콘텐츠는 오버레이에 배치되지 않는 한 표시되지 않습니다.
그룹화 기준	그룹화 기준 기능은 트리 그리드에 내재되어 있으므로 지원되지 않습니다.

메모

트리 그리드의 깊이 제한은 25개 수준입니다. 더 많은 레벨을 지원하려면 애플리케이션에 사용자 정의 CSS 클래스를 추가해야 합니다. 아래에서 이러한 CSS 클래스의 예를 볼 수 있습니다.

.igx-grid__tree-cell--padding-level-26 {
    padding-left: 39rem;
}

메모

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

API 참조

테마 종속성

추가 리소스

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