Angular 계층형 그리드 다중 열 헤더 개요

    IgxHierarchicalGrid 공통 다중 헤더 아래에 열을 배치하여 그룹화할 수 있는 multi-column headers 지원합니다. 각 다중 열 헤더 그룹은 Material UI 그리드 내의 다른 그룹 또는 열 간의 조합을 나타낼 수 있습니다.

    Angular Hierarchical Grid Multi-column Headers Overview Example

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

    ​Multi-column header 선언은 header 제목이 전달된 igx-column-group 구성 요소에 열 집합을 래핑하여 수행할 수 있습니다.

    <igx-hierarchical-grid [data]="localdata" [moving]="true" [allowFiltering]="true">
    <igx-column field="CustomerID" sortable="true" resizable="true"></igx-column>
    <igx-column-group header="Address Information">
        <igx-column-group header="Location">
            <igx-column field="Address" sortable="true" resizable="true"></igx-column>
            <igx-column field="City" sortable="true" resizable="true"></igx-column>
            <igx-column field="PostalCode" sortable="true" resizable="true"></igx-column>
            <igx-column field="Country" sortable="true" resizable="true"></igx-column>
        </igx-column-group>
        <igx-column-group header="Contact Information">
            <igx-column field="Phone" sortable="true" resizable="true"></igx-column>
            <igx-column field="Fax" sortable="true" resizable="true"></igx-column>
        </igx-column-group>
    </igx-column-group>
</igx-hierarchical-grid>
html

    ​n-th 수준의 중첩된 헤더를 얻으려면 위의 선언을 따라야 합니다. 따라서 igx-column-group 중첩하면 원하는 결과를 얻을 수 있습니다.

    <igx-hierarchical-grid [data]="localdata" [allowFiltering]="true" [moving]="true">
    <igx-column field="CustomerID" sortable="true" resizable="true"></igx-column>
    <igx-column-group pinned]="false" header="General Information">
        <igx-column field="CompanyName" sortable="true" resizable="true"></igx-column>
        <igx-column-group header="Person Details">
            <igx-column field="ContactName" sortable="true" resizable="true"></igx-column>
            <igx-column field="ContactTitle" sortable="true" resizable="true"></igx-column>
        </igx-column-group>
    </igx-column-group>
</igx-hierarchical-grid>
html

    모든 igx-column-group​ ​moving, pinning 및 hiding 지원합니다.

    일련의 열 및 열 그룹이 있는 경우 고정은 최상위 열 상위 항목에 대해서만 작동합니다. 보다 구체적으로 중첩된 column groups 또는 columns 고정하는 것은 허용되지 않습니다.
    다중 열 헤더와 함께 고정을 사용하면 전체 그룹이 고정됩니다.
    ​columns​ ​column groups 간 이동은 계층 구조에서 동일한 수준에 있고 둘 다 동일한 group에 있는 경우에만 허용됩니다.
    ​columns/column-groups 현재 group으로 래핑되지 않은 경우 즉, 최상위 columns 의미하며 표시되는 전체 열 간에 이동이 허용됩니다.

    <igx-hierarchical-grid [data]="localdata" [allowFiltering]="true" [moving]="true">
    <igx-column field="CustomerID" sortable="true" resizable="true"></igx-column>
    <igx-column-group [pinned]="false" header="General Information">
        <igx-column field="CompanyName" sortable="true" resizable="true"></igx-column>
        <igx-column-group header="Person Details">
            <igx-column field="ContactName" sortable="true" resizable="true"></igx-column>
            <igx-column field="ContactTitle" sortable="true" resizable="true"></igx-column>
        </igx-column-group>
    </igx-column-group>
    ...
</igx-hierarchical-grid>
html

    Multi-column Header Template

    그리드의 각 열 그룹은 별도로 템플릿화할 수 있습니다. 열 그룹에는 igxHeader 지시문으로 장식된 ng-template 태그가 필요합니다. ng-template 열 그룹 개체와 함께 컨텍스트로 제공됩니다.

    ...
<igx-column-group header="General Information">
    <ng-template igxHeader let-columnGroup>
        {{ columnGroup.header | uppercase }}
    </ng-template>
    ...
</igx-column-group>
...
html

    여러 열 그룹에 대해 단일 템플릿을 재사용하려면 다음과 같이 열 그룹의 headerTemplate 속성을 설정할 수 있습니다.

    <ng-template #columnGroupHeaderTemplate let-columnGroup>
    {{ columnGroup.header | uppercase }}
</ng-template>

...
<igx-column-group header="General Information" [headerTemplate]="columnGroupHeaderTemplate">
    ...
</igx-column-group>
<igx-column-group header="Address Information" [headerTemplate]="columnGroupHeaderTemplate">
    ...
</igx-column-group>
...
html

    열 헤더가 다시 템플릿화되고 그리드 이동이 활성화된 경우 템플릿 요소에서 해당 열의 draggable 속성을 false로 설정해야 적용되는 모든 이벤트를 처리할 수 있습니다!

    <ng-template igxHeader>
    <igx-icon [attr.draggable]="false" (click)="onClick()"></igx-icon>
</ng-template>
html

    다음 샘플은 헤더 템플릿을 사용하여 축소 가능한 열 그룹을 구현하는 방법을 보여줍니다.

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    스타일링

    정렬 동작 스타일 지정을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.

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

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

    가장 간단한 접근 방식에 따라 우리는 grid-theme 그리고 받아들인다 $header-background, $header-text-color, $header-border-width, $header-border-style 그리고 $header-border-color 매개변수.

    $custom-theme: grid-theme(
  $header-background: #e0f3ff,
  $header-text-color: #e41c77,
  $header-border-width: 1px,
  $header-border-style: solid,
  $header-border-color: rgba(0, 0, 0, 0.08)
);
scss

    우리가 방금 한 것처럼 색상 값을 하드 코딩하는 대신, and color 함수를 사용하여 palette 색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 지침은 항목을 참조하십시오 Palettes.

    마지막 단계는 구성요소 믹스인을 포함하는 것입니다.

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

    Demo

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

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

    API References

    App Builder | CTA Banner

    Additional Resources

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