다중 열 헤더를 사용하면 여러 수준의 중첩된 열과 열 그룹을 가질 수 있습니다. 또한 각 열 그룹을 축소 가능으로 표시하는 기능도 제공합니다. 접을 수 있는 다중 열 헤더를 사용 하면 축소/확장, 즉 현재 헤더 아래에 중첩된 헤더를 표시하거나 숨길 수 있으며, 이를 통해 예를 들어 단축/요약된 정보를 얻을 수 있습니다.
最速で機能豊富な Angular Data Grid は、ページング、ソート、フィルタリング、グループ化、PDF および Excel へのエクスポートなどの機能を提供します。究極のアプリ構築エクスペリエンスとデータ操作に必要なすべてが揃っています。
다음 단계는 app.module.ts 파일에서 IgxGridModule 가져오는 것입니다. 또한 그리드에서 열 그룹을 설정하는 방법에 대한 자세한 정보를 보려면 다중 열 그룹 주제를 간략하게 살펴보는 것이 좋습니다.
용법
축소 가능한 열 그룹은 열 그룹을 더 작은 데이터 세트로 축소/확장하는 방법을 제공하는 다중 열 헤더 기능의 일부입니다. 열 그룹이 축소되면 열의 하위 집합이 최종 사용자에게 표시되고 그룹의 다른 하위 열은 숨겨집니다. 축소/확장된 각 열은 그리드 데이터 소스에 바인딩되거나 바인딩 해제되어 계산될 수 있습니다.
열 그룹을 collapsible로 정의하려면 속성을 [collapsible]="true"로 설정해야 하며 visibleWhenCollapsed 속성을 두 개 이상의 하위 열에 정의해야 한다는 점도 명심해야 합니다. 그룹이 축소되면 표시되고([visibleWhenCollapsed]="true") 그룹이 확장되면([visibleWhenCollapsed]="false") 하나 이상의 열이 숨겨져야 합니다. 그렇지 않으면 축소 가능 기능이 비활성화됩니다. 일부 하위 열에 visibleWhenCollapsed 지정되지 않은 경우 상위 상태가 확장되거나 축소되었는지 여부에 관계없이 이 열이 항상 표시됩니다.
그럼 아래 마크업을 살펴보겠습니다.
<igx-column-groupheader="Customer Information" [collapsible]="true"><!-- Initially the column groups will be expanded---><!--The column below will be visible when its parent is collapsed--><igx-columnfield="CustomerName"header="Fullname" [dataType]="'string'" [visibleWhenCollapsed]="true"></igx-column><!--The three columns below will be visible when its parent is expanded--><igx-columnfield="CustomerID"header="Customer ID" [dataType]="'string'" [visibleWhenCollapsed]="false"></igx-column><igx-columnfield="FirstName"header="First Name" [dataType]="'string'" [visibleWhenCollapsed]="false"></igx-column><igx-columnfield="LastName"header="Last Name" [dataType]="'string'" [visibleWhenCollapsed]="false"></igx-column><igx-column-groupheader="Customer Address"><!--This column visibility will not be changed based on parent expand/collapsed state--><igx-columnfield="Country"header="Country" [dataType]="'string'" [sortable]="true"></igx-column><igx-columnfield="City"header="City" [dataType]="'string'" [sortable]="true"></igx-column></igx-column-group></igx-column-group>html
이제 요약해 보겠습니다. 모든 하위 열에는 세 가지 상태가 있습니다.
상위 항목의 확장 상태에 관계없이 항상 표시될 수 있습니다.
상위 항목이 축소되면 표시될 수 있습니다.
상위 항목이 축소되면 숨길 수 있습니다.
축소 가능으로 지정된 컬럼 그룹의 초기 상태는 [expanded]="true" 입니다. 그러나 [expanded]="false" 속성을 설정하여 이 동작을 쉽게 변경할 수 있습니다.
확장/축소 표시기 템플릿
igxGrid의 기본 확장 표시기는 다음과 같습니다.
igxGrid의 기본 축소 표시기는 다음과 같습니다.
또한 기본 확장/축소 표시기를 변경해야 하는 경우 입력 속성 또는 지시문을 통해 이를 수행할 수 있는 두 가지 쉬운 방법을 제공합니다.
입력 속성 사용
사용자 정의 확장/축소 템플릿을 정의하고 collapsibleIndicatorTemplate 입력 속성을 사용하여 각 축소 가능한 열 그룹에 이를 제공할 수 있습니다. 아래 마크업을 확인하세요.