계층 그리드 도구 모음 컴포넌트- 네이티브 Angular

Hierarchical Grid 도구 모음

The Hierarchical Grid in Ignite UI for Angular provides an IgxGridToolbarComponent which is essentially a container for UI operations. The Angular toolbar is located at the top of the Angular component, i.e the Hierarchical Grid and it matches its horizontal size. The toolbar container can host predefined UI controls for the following Hierarchical Grid's features:

Column Hiding
Column Pinning
Excel Exporting
Advanced Filtering

or just any other custom content. The toolbar and the predefined UI components support Angular events and expose API for developers.

데모

The predefined actions and title UI components are added inside the <igx-grid-toolbar> and this is all needed to have a toolbar providing default interactions with the corresponding Grid features:

<igx-hierarchical-grid [data]="data">
    <igx-grid-toolbar>
        <igx-grid-toolbar-title>Hierarchical Grid Toolbar</igx-grid-toolbar-title>
        <igx-grid-toolbar-actions>
            <igx-grid-toolbar-advanced-filtering><igx-grid-toolbar-advanced-filtering>
            <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-hierarchical-grid>

Note: As seen in the code snippet above, the predefined actions UI components are wrapped in the <igx-grid-toolbar-actions> container. This way, the toolbar title is aligned to the left of the toolbar and the actions are aligned to the right of the toolbar.

Of course, each of these UIs can be added independently of each other, or may not be added at all. This way the toolbar container will be rendered empty:

<igx-hierarchical-grid [data]="data">
    <igx-grid-toolbar>
    </igx-grid-toolbar>
</igx-hierarchical-grid>

For a comprehensive look over each of the default UI components, continue reading the Features section below.

기능

The toolbar is great at separating logic/interactions which affects the grid as a whole. As shown above, it can be configured to provide default components for controlling, column hiding, column pinning, advanced filtering and exporting data from the grid. These features can be enabled independently from each other by following a pattern similar to the card component of the Ignite UI for Angular suite. Listed below are the main features of the toolbar with example code for each of them.

Note

계층 그리드 또는 하위 그리드를 계층 아래로 내보내기를 하는 경우, 내보내기를 한 데이터는 각 그리드에 속한 행의 플랫 컬렉션이 됩니다(하위 그리드는 내보내기를 한 데이터에 포함되지 않음).

각 버튼의 텍스트를 설정하는 속성에 대해서는 이하의 API 부분에 열거되어 있습니다.

MS Excel로 내보내기 및 CSV로 내보내기 기능은 공급자로 각각 IgxExcelExporterService 및 IgxCsvExporterService를 사용합니다. 이들 중 하나를 사용해야 하는 경우에는 app.module.ts 파일의 공급자 배열에서 지정해야 합니다. 예를 들면, 다음의 코드 조각은 모든 내보내기 서비스를 포함하는 방법을 보여줍니다:

// app.module.ts

...
import { IgxExcelExporterService, IgxCsvExporterService } from "igniteui-angular";

@NgModule({
  providers: [ IgxExcelExporterService, IgxCsvExporterService ]
})

export class AppModule {}

사용자 콘텐츠 템플릿

도구 모음에 특정 애플리케이션 UI(예: 사용자 버튼 등)를 추가해야 하는 경우, ng-template을 작성하고 igxToolbarCustomContent 지시문으로 표시할 수 있습니다. 다음 코드 조각은 이러한 사용자 템플릿을 정의하는 방법을 보여줍니다:

<igx-hierarchical-grid [showToolbar]="true" ...>

    ...

    <ng-template igxToolbarCustomContent let-hierarchicalGrid="grid">
        <button igxButton="flat" igxRipple igxRippleCentered="true" (click)="hierarchicalGrid.clearSort()">
            <igx-icon fontSet="material">clear</igx-icon>
            Clear Sort
        </button>
    </ng-template>
</igx-hierarchical-grid>

Note

igxToolbarCustomContent 지시문의 컨텍스트에는 2가지 속성이 있습니다: grid - 도구 모음이 포함된 IgxHierarchicalGridComponent에 대한 참조 및 toolbar - IgxGridToolbarComponent에 대한 참조

다음 샘플은 열 헤더를 클릭하여 정렬 설정을 삭제하기 위해 버튼을 도구 모음에 추가하는 방법을 보여줍니다.