Angular 다중 행 레이아웃

    다중 행 레이아웃은 igxGridComponent의 렌더링 기능을 확장합니다. 이 기능을 사용하면 단일 데이터 레코드를 여러 개의 표시 행으로 분할할 수 있습니다.

    Angular Multi-row Layout Example

    다중 행 레이아웃 선언은 igx-column-layout 구성 요소를 통해 이루어집니다. 각 igx-column-layout 구성 요소는 하나 이상의 igx-column 구성 요소를 포함하는 블록으로 간주되어야 합니다. 일부 그리드 기능은 블록 수준에서 작동합니다(아래 "기능 통합" 섹션에 나열되어 있음). 예를 들어 가상화는 블록을 사용하여 가상 청크를 결정하므로 더 나은 성능을 위해 레이아웃에서 허용하는 경우 열을 더 많은 igx-column-layout 블록으로 분할합니다. 다중 행 레이아웃을 구성할 때 해당 블록 외부에 열이 없어야 하며 IgxColumnGroupComponent 사용하면 안 됩니다. 다중 행 레이아웃은 그리드 레이아웃 사양 위에 구현되며 해당 요구 사항을 준수해야 합니다.

    IgxColumnComponent 각 셀의 위치와 범위를 결정하기 위해 4개의 @Input 속성을 노출합니다.

    • colStart- 필드가 시작되는 열 인덱스입니다. 이 속성은 필수 입니다.
    • rowStart- 필드가 시작되는 행 인덱스입니다. 이 속성은 필수 입니다.
    • colEnd- 현재 필드가 끝나야 하는 열 인덱스입니다. colStart와 colEnd 사이의 열 양에 따라 해당 필드에 걸쳐 있는 열의 양이 결정됩니다. 이 속성은 선택 사항 입니다. 설정하지 않으면 기본값은 colStart + 1 입니다.
    • rowEnd- 현재 필드가 끝나야 하는 행 인덱스입니다. rowStart와 rowEnd 사이의 행 양에 따라 해당 필드에 걸쳐 있는 행의 양이 결정됩니다. 이 속성은 선택 사항 입니다. 설정하지 않으면 기본값은 rowStart + 1 입니다.
    <igx-column-layout>
	<igx-column [rowStart]="1" [colStart]="1" [rowEnd]="3" field="ID"></igx-column>
</igx-column-layout>
<igx-column-layout>
	<igx-column [rowStart]="1" [colStart]="1" [colEnd]="3" field="CompanyName"></igx-column>
	<igx-column [rowStart]="2" [colStart]="1" [colEnd]="2" field="ContactName"></igx-column>
	<igx-column [rowStart]="2" [colStart]="2" [colEnd]="3" field="ContactTitle"></igx-column>
</igx-column-layout>
<igx-column-layout>
	<igx-column [rowStart]="1" [colStart]="1" [colEnd]="3" field="Country"></igx-column>
	<igx-column [rowStart]="1" [colStart]="3" [colEnd]="5" field="Region"></igx-column>
	<igx-column [rowStart]="1" [colStart]="5" [colEnd]="7" field="PostalCode"></igx-column>
	<igx-column [rowStart]="2" [colStart]="1" [colEnd]="4" field="City"></igx-column>
	<igx-column [rowStart]="2" [colStart]="4" [colEnd]="7" field="Address"></igx-column>
</igx-column-layout>
<igx-column-layout>
    <igx-column [rowStart]="1" [colStart]="1" field="Phone"></igx-column>
    <igx-column [rowStart]="2" [colStart]="1" field="Fax"></igx-column>
</igx-column-layout>

    위 구성의 결과는 아래 스크린샷에서 볼 수 있습니다.

    Note

    rowStart 및 colStart 속성은 각 igx-column에 대해 igx-column-layout으로 설정되어야 합니다. igxColumnLayout 구성 요소는 레이아웃이 올바른지 확인하지 않고 이에 대한 오류나 경고를 발생시키지 않습니다. 개발자는 레이아웃 선언이 정확하고 완전한지 확인해야 합니다. 그렇지 않으면 잘못된 정렬, 겹침 및 브라우저 불일치로 인해 레이아웃이 깨질 수 있습니다.

    Feature Integration

    Multi-row Layout의 완전히 다른 렌더링 접근 방식으로 인해 일부 열 기능은 구성 요소에서만 igx-column-layout 작동합니다. 이러한 기능은 Column Pinning 및 Column Hiding입니다. 다른 것들 - 정렬 및 그룹화는 구성 요소에서 igx-column 동일한 방식으로 작동합니다.

    • 필터링 - Excel 스타일 필터링만 지원됩니다. filterMode 명시적으로 FilterMode.quickFilter로 설정해도 효과가 없습니다.
    • 페이징 - 시각적 행이 아닌 레코드에서 작동합니다.
    • 그룹화 기준 -hideGroupedColumns 옵션은 다중 행 레이아웃에 적용되지 않습니다. 그룹화된 열은 항상 표시됩니다.

    다음 기능은 현재 지원 되지 않습니다.

    • 열 이동
    • 다중 열 헤더
    • 엑셀로 내보내기
    • 요약

    Keyboard Navigation

    다중 행 레이아웃을 갖춘 IgxGridComponent는 내장 키보드 탐색 기능을 제공합니다.

    Horizontal navigation

    • 왼쪽 화살표 또는 오른쪽 화살표- 정의된 열 레이아웃의 영향을 받지 않고 현재 행 내에서 왼쪽/오른쪽에 있는 인접한 셀로 이동합니다. 현재 셀이 두 개 이상의 행에 걸쳐 있는 경우 이전에 다른 인접한 셀로 이동한 적이 없다면 왼쪽 화살표 및 오른쪽 화살표는 동일한 rowStart 사용하여 왼쪽과 오른쪽의 첫 번째 셀로 이동해야 합니다. 탐색은 시작 탐색 셀을 저장하고 가능한 경우 동일한 rowStart 있는 셀로 이동합니다.
    • Ctrl + 왼쪽 화살표 (HOME) 또는 Ctrl + 오른쪽 화살표 (END) - 행의 시작 또는 끝으로 이동하고 시작 탐색 셀에 따라 셀을 선택합니다.

    Vertical navigation

    • 위쪽 화살표 또는 아래쪽 화살표- 시작 위치를 기준으로 위/아래 셀로 이동하며 행의 영향을 받지 않습니다. 현재 셀이 둘 이상의 열에 걸쳐 있는 경우 탐색 시작 셀에 따라 다음 활성 셀이 선택됩니다.
    • Ctrl + 위쪽 화살표 또는 Ctrl + 아래쪽- 첫 번째 또는 마지막 행의 동일한 열을 탐색하고 초점을 적용합니다.
    • Ctrl + Home 또는 Ctrl + End- 첫 번째 행으로 이동하여 첫 번째 셀에 초점을 맞추거나 마지막 행으로 이동하여 마지막 셀에 초점을 맞춥니다.
    Note

    여러 행이나 열에 걸쳐 있는 셀을 통한 탐색은 시작 탐색 셀에 따라 수행되며 반대 방향 키를 사용하여 시작 셀로 돌아갈 수 있습니다. 그룹 행을 탐색할 때도 동일한 접근 방식이 사용됩니다.

    Note

    선택 및 다중 셀 선택이 레이아웃에서 작동합니다. 즉, 셀이 활성화되면 해당 레이아웃이 선택됩니다. 또한 드래그 선택과 같은 다중 선택의 모든 기능을 적용할 수 있으며 셀별로 작동하지 않고 레이아웃별로 작동합니다.

    Custom Keyboard Navigation

    그리드를 사용하면 특정 키를 눌렀을 때 기본 탐색 동작을 사용자 정의할 수 있습니다. going to the next cell 이나 cell below 이동하는 등의 작업은 강력한 키보드 탐색 API를 사용하여 쉽게 처리할 수 있습니다.

    • gridKeydown이 노출됩니다. 이벤트는 IGridKeydownEventArgs 내보냅니다. 이 이벤트는 위에서 언급한 키보드 키 조합을 통해서만 사용할 수 있으며, 다른 모든 키 동작에는 keydown event (keydown)="onKeydown($event)" 사용할 수 있습니다.
    • navigateTo- 이 메소드를 사용하면 제공된 rowindex 및 visibleColumnIndex 기반으로 위치를 탐색할 수 있습니다.

    아래 데모에서는 Excel에서 관찰된 동작과 유사하게 Enter 및 Shift + Enter 키를 통해 아래/위로 탐색 기능을 추가합니다.

    Demo

    Layout Configurator

    때로는 열 레이아웃을 구성할 때 적절한 colStart 및 colEnd 또는 rowStart 및 rowEnd 계산하고 설정하는 것이 어려울 수 있습니다. 특히 단일 레이아웃에 많은 열이 있는 경우 더욱 그렇습니다. 이것이 바로 우리가 작은 구성 프로그램을 만든 이유입니다. 이를 통해 쉽게 구성할 수 있으며 적용 시 igxGrid 내부에서 어떻게 보일지 비슷한 미리보기를 볼 수 있습니다. 다음과 같은 상호 작용을 수행할 수 있습니다.

    • 전체 구성에 대한 행 수를 설정합니다. 모든 레이아웃에는 동일한 양의 행이 있어야 합니다.
    • 레이아웃 추가 칩을 클릭하여 열 Add Layout /제거하거나 레이아웃 칩을 왼쪽/오른쪽으로 드래그하여 순서를 바꾸세요.
    • 각 레이아웃에 대한 특정 설정을 열 수와 너비로 지정합니다. 설정은 현재 선택된 레이아웃을 참조합니다.
    • 더 많은 열/행을 확장할 수 있도록 레이아웃 미리 보기에서 열 셀의 크기를 조정하거나 Delete 버튼을 사용하여 셀을 지울 수 있습니다.
    • 원하는 위치에 열 칩을 드래그하여 미리보기에서 열을 설정하세요.
    • ​Add Column 칩을 사용하여 새 열을 추가/제거합니다.
    • 예를 들어 NgForOf 사용하여 템플릿에서 사용 및 구문 분석할 수도 있는 igxGrid 또는 JSON 표현 내부에 배치하여 전체 구성의 템플릿 출력을 가져옵니다.

    기본적으로 이전 샘플과 동일한 열을 설정했지만 원하는 구성에 맞게 지우고 구성할 수 있습니다.

    스타일링

    igxGrid를 사용하면 스타일을 지정할 수 있습니다 Ignite UI for Angular Theme Library. grid-theme 그리드의 모든 기능을 사용자 지정할 수 있는 다양한 속성을 노출합니다.

    아래 단계에서는 그리드의 다중 행 레이아웃 스타일을 사용자 정의하는 단계를 진행합니다.

    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 확장하고 원하는 대로 기능 레이아웃을 사용자 정의하는 데 필요한 매개변수를 허용하는 새 테마를 만듭니다.

    $custom-theme: grid-theme(
  $cell-active-border-color: #ffcd0f,
  $cell-selected-background: #6f6f6f,
  $row-hover-background: #fde069,
  $row-selected-background: #8d8d8d,
  $header-background: #494949,
  $header-text-color: #fff,
  $sorted-header-icon-color: #ffcd0f,
  $sortable-header-icon-hover-color: #e9bd0d
);
    Note

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

    Applying the custom theme

    테마를 적용하는 가장 쉬운 방법은 전역 스타일 파일에 sass @include 문을 사용하는 것입니다.

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

    사용자 정의 테마가 특정 구성 요소에만 영향을 미치도록 하려면 방금 정의한 모든 스타일을 전역 스타일 파일에서 사용자 정의 구성 요소의 스타일 파일로 이동할 수 있습니다(index 파일 가져오기 포함).

    이렇게 하면 Angular의 ViewEncapsulation 덕분에 사용자 정의 구성 요소에만 스타일이 적용됩니다.

    Demo

    Note

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

    API References

    Additional Resources

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