Angular 다중 행 레이아웃
다중 행 레이아웃은 igxGridComponent
의 렌더링 기능을 확장합니다. 이 기능을 사용하면 단일 데이터 레코드를 여러 개의 표시 행으로 분할할 수 있습니다.
Angular 다중 행 레이아웃 예제
import { Component, ViewEncapsulation } from '@angular/core' ;
import { DefaultSortingStrategy, SortingDirection, IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnLayoutComponent, IgxColumnComponent } from 'igniteui-angular' ;
import { DATA } from '../../data/customers' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
@Component ({
encapsulation : ViewEncapsulation.None,
selector : 'app-grid-multi-row-layout-sample' ,
styleUrls : ['./grid-multi-row-layout.component.scss' ],
templateUrl : './grid-multi-row-layout.component.html' ,
imports : [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnLayoutComponent, IgxColumnComponent]
})
export class GridMultiRowLayoutComponent {
public sourceData = DATA;
public group = [
{
dir : SortingDirection.Asc,
fieldName : 'Country' ,
ignoreCase : false ,
strategy : DefaultSortingStrategy.instance()
}
];
public sort = [
{
dir : SortingDirection.Desc,
fieldName : 'CompanyName' ,
ignoreCase : true
}
];
}
ts コピー <div class ="wrapper" >
<igx-grid [igxPreventDocumentScroll ]="true" #grid
[width ]="'100%'"
height ="720px"
[data ]="sourceData"
[autoGenerate ]="false"
[groupingExpressions ]="group"
[sortingExpressions ]="sort"
[allowFiltering ]="true" >
<igx-grid-toolbar >
<igx-grid-toolbar-actions >
<igx-grid-toolbar-hiding > </igx-grid-toolbar-hiding >
<igx-grid-toolbar-pinning > </igx-grid-toolbar-pinning >
</igx-grid-toolbar-actions >
</igx-grid-toolbar >
<igx-column-layout [pinned ]="true" [header ]="'ID'" >
<igx-column [rowStart ]="1" [colStart ]="1" [rowEnd ]="3" field ="ID" [filterable ]="false" [width ]="'150px'" > </igx-column >
</igx-column-layout >
<igx-column-layout [pinned ]="true" [header ]="'Contact Details'" >
<igx-column [rowStart ]="1" [colStart ]="1" [colEnd ]="3" field ="CompanyName" [header ]="'Company Name'" [sortable ]="true" [width ]="'350px'" > </igx-column >
<igx-column [rowStart ]="2" [colStart ]="1" [colEnd ]="2" field ="ContactName" [header ]="'Contact Name'" [groupable ]="true" > </igx-column >
<igx-column [rowEnd ]="3" [rowStart ]="2" [colStart ]="2" [colEnd ]="3" field ="ContactTitle" [header ]="'Contact Title'" [groupable ]="true" > </igx-column >
</igx-column-layout >
<igx-column-layout [header ]="'Address Details'" >
<igx-column [rowStart ]="1" [colStart ]="1" [colEnd ]="3" field ="Country" [groupable ]="true" [filterable ]="false" [width ]="'220px'" > </igx-column >
<igx-column [rowStart ]="1" [colStart ]="3" [colEnd ]="5" field ="Region" [groupable ]="true" [filterable ]="false" [width ]="'220px'" > </igx-column >
<igx-column [rowStart ]="1" [colStart ]="5" [colEnd ]="7" field ="PostalCode" [header ]="'Postal Code'" [groupable ]="true" [filterable ]="false" [width ]="'220px'" > </igx-column >
<igx-column [rowStart ]="2" [colStart ]="1" [colEnd ]="4" field ="City" [groupable ]="true" [filterable ]="false" > </igx-column >
<igx-column [rowStart ]="2" [colStart ]="4" [colEnd ]="7" field ="Address" [filterable ]="false" > </igx-column >
</igx-column-layout >
<igx-column-layout [header ]="'Phone Details'" >
<igx-column [rowStart ]="1" [colStart ]="1" [colEnd ]="2" field ="Phone" [filterable ]="false" [width ]="'220px'" > </igx-column >
<igx-column [rowStart ]="2" [colStart ]="1" [colEnd ]="2" field ="Fax" [filterable ]="false" > </igx-column >
</igx-column-layout >
</igx-grid >
</div >
html コピー .wrapper {
--ig-size: var(--ig-size-medium);
padding : 16px ;
}
scss コピー
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
다중 행 레이아웃 선언은 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 >
html
위 구성의 결과는 아래 스크린샷에서 볼 수 있습니다.
rowStart
및 colStart
속성은 각 igx-column
에 대해 igx-column-layout
으로 설정되어야 합니다. igxColumnLayout
구성 요소는 레이아웃이 올바른지 확인하지 않고 이에 대한 오류나 경고를 발생시키지 않습니다. 개발자는 레이아웃 선언이 정확하고 완전한지 확인해야 합니다. 그렇지 않으면 잘못된 정렬, 겹침 및 브라우저 불일치로 인해 레이아웃이 깨질 수 있습니다.
기능 통합
Multi-row Layout의 완전히 다른 렌더링 접근 방식으로 인해 일부 열 기능은 구성 요소에서만 igx-column-layout
작동합니다. 이러한 기능은 Column Pinning 및 Column Hiding입니다. 다른 것들 - 정렬 및 그룹화는 구성 요소에서 igx-column
동일한 방식으로 작동합니다.
필터링 - Excel 스타일 필터링만 지원됩니다. filterMode
명시적으로 FilterMode.quickFilter
로 설정해도 효과가 없습니다.
페이징 - 시각적 행이 아닌 레코드에서 작동합니다.
그룹화 기준 -hideGroupedColumns
옵션은 다중 행 레이아웃에 적용되지 않습니다. 그룹화된 열은 항상 표시됩니다.
다음 기능은 현재 지원 되지 않습니다 .
키보드 탐색
다중 행 레이아웃을 갖춘 IgxGridComponent는 내장 키보드 탐색 기능을 제공합니다.
수평 탐색
왼쪽 화살표 또는 오른쪽 화살표 - 정의된 열 레이아웃의 영향을 받지 않고 현재 행 내에서 왼쪽/오른쪽에 있는 인접한 셀로 이동합니다. 현재 셀이 두 개 이상의 행에 걸쳐 있는 경우 이전에 다른 인접한 셀로 이동한 적이 없다면 왼쪽 화살표 및 오른쪽 화살표는 동일한 rowStart
사용하여 왼쪽과 오른쪽의 첫 번째 셀로 이동해야 합니다. 탐색은 시작 탐색 셀을 저장하고 가능한 경우 동일한 rowStart
있는 셀로 이동합니다.
Ctrl + 왼쪽 화살표 (HOME ) 또는 Ctrl + 오른쪽 화살표 (END ) - 행의 시작 또는 끝으로 이동하고 시작 탐색 셀에 따라 셀을 선택합니다.
수직 탐색
위쪽 화살표 또는 아래쪽 화살표 - 시작 위치를 기준으로 위/아래 셀로 이동하며 행의 영향을 받지 않습니다. 현재 셀이 둘 이상의 열에 걸쳐 있는 경우 탐색 시작 셀에 따라 다음 활성 셀이 선택됩니다.
Ctrl + 위쪽 화살표 또는 Ctrl + 아래쪽 - 첫 번째 또는 마지막 행의 동일한 열을 탐색하고 초점을 적용합니다.
Ctrl + Home 또는 Ctrl + End - 첫 번째 행으로 이동하여 첫 번째 셀에 초점을 맞추거나 마지막 행으로 이동하여 마지막 셀에 초점을 맞춥니다.
여러 행이나 열에 걸쳐 있는 셀을 통한 탐색은 시작 탐색 셀에 따라 수행되며 반대 방향 키를 사용하여 시작 셀로 돌아갈 수 있습니다. 그룹 행을 탐색할 때도 동일한 접근 방식이 사용됩니다.
선택 및 다중 셀 선택이 레이아웃에서 작동합니다. 즉, 셀이 활성화되면 해당 레이아웃이 선택됩니다. 또한 드래그 선택과 같은 다중 선택의 모든 기능을 적용할 수 있으며 셀별로 작동하지 않고 레이아웃별로 작동합니다.
사용자 정의 키보드 탐색
그리드를 사용하면 특정 키를 눌렀을 때 기본 탐색 동작을 사용자 정의할 수 있습니다. going to the next cell
이나 cell below
이동하는 등의 작업은 강력한 키보드 탐색 API를 사용하여 쉽게 처리할 수 있습니다.
gridKeydown
이 노출됩니다. 이벤트는 IGridKeydownEventArgs
내보냅니다. 이 이벤트는 위에서 언급한 키보드 키 조합을 통해서만 사용할 수 있으며, 다른 모든 키 동작에는 keydown
event (keydown)="onKeydown($event)"
사용할 수 있습니다.
navigateTo
- 이 메소드를 사용하면 제공된 rowindex
및 visibleColumnIndex
기반으로 위치를 탐색할 수 있습니다.
아래 데모에서는 Excel에서 관찰된 동작과 유사하게 Enter 및 Shift + Enter 키를 통해 아래/위로 탐색 기능을 추가합니다.
데모
import { Component, ViewChild, ViewEncapsulation } from '@angular/core' ;
import { IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent } from 'igniteui-angular' ;
import { DATA } from '../../data/company-data' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
@Component ({
encapsulation : ViewEncapsulation.None,
selector : 'app-grid-mrl-custom-navigation-sample' ,
styleUrls : ['./grid-mrl-custom-navigation.component.scss' ],
templateUrl : './grid-mrl-custom-navigation.component.html' ,
imports : [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnLayoutComponent, IgxColumnComponent]
})
export class GridMRLCustomNavigationComponent {
@ViewChild (IgxGridComponent, { read : IgxGridComponent, static : true })
public grid: IgxGridComponent;
public sourceData = DATA;
public customNavigation (args ) {
const target = args.target;
if (args.event.key.toLowerCase() === 'enter' ) {
args.event.preventDefault();
args.cancel = true ;
const rowIndex = target.row.index === undefined ? target.index : target.row.index;
this .grid.navigateTo(args.event.shiftKey ? rowIndex - 1 : rowIndex + 1 , target.column.visibleIndex,
(obj ) => {
obj.target.activate();
});
}
}
}
ts コピー <div class ="wrapper" >
<igx-grid [igxPreventDocumentScroll ]="true" #grid
[width ]="'100%'"
height ="570px"
[data ]="sourceData"
[autoGenerate ]="false"
(gridKeydown )="customNavigation($event)" >
<igx-column-layout [header ]="'Company'" >
<igx-column [rowStart ]="1" [colStart ]="1" [colEnd ]="3" field ="company" header ='Company' > </igx-column >
<igx-column [rowStart ]="2" [colStart ]="1" field ="country" header ='Country' > </igx-column >
<igx-column [rowStart ]="2" [colStart ]="2" field ="city" header ='City' > </igx-column >
<igx-column [rowStart ]="3" [colStart ]="1" [colEnd ]="3" field ="address" header ='Address' > </igx-column >
</igx-column-layout >
<igx-column-layout [header ]="'Sales'" >
<igx-column [rowStart ]="1" [rowEnd ]='3' [colStart ]="1" [colEnd ]="3" field ="sales_lifetimeSales" header ='Lifetime Sales' > </igx-column >
<igx-column [rowStart ]="3" [colStart ]="1" field ="sales_quarterlySales" header ='Quarterly' > </igx-column >
<igx-column [rowStart ]="3" [colStart ]="2" field ="sales_yearlySales" header ='Yearly' > </igx-column >
</igx-column-layout >
<igx-column-layout [header ]="'Market Potential'" >
<igx-column [rowStart ]="1" [rowEnd ]='4' [colStart ]="1" field ="sales_marketPotential" header ='Market Potential' > </igx-column >
</igx-column-layout >
<igx-column-layout [header ]="'Assets'" >
<igx-column [rowStart ]="1" [colStart ]="1" field ="assets_cash" header ='Assets Cash' > </igx-column >
<igx-column [rowStart ]="1" [colStart ]="2" [colEnd ]="4" field ="assets_accRec" header ='Accounts Receivable' > </igx-column >
<igx-column [rowStart ]="2" [rowEnd ]='4' [colStart ]="1" [colEnd ]="4" field ="assets_books" header ='Assets Books' > </igx-column >
</igx-column-layout >
</igx-grid >
</div >
html コピー .wrapper {
--ig-size: var(--ig-size-medium);
padding : 16px ;
}
scss コピー
레이아웃 구성자
때로는 열 레이아웃을 구성할 때 적절한 colStart
및 colEnd
또는 rowStart
및 rowEnd
계산하고 설정하는 것이 어려울 수 있습니다. 특히 단일 레이아웃에 많은 열이 있는 경우 더욱 그렇습니다. 이것이 바로 우리가 작은 구성 프로그램을 만든 이유입니다. 이를 통해 쉽게 구성할 수 있으며 적용 시 igxGrid 내부에서 어떻게 보일지 비슷한 미리보기를 볼 수 있습니다. 다음과 같은 상호 작용을 수행할 수 있습니다.
전체 구성에 대한 행 수를 설정합니다. 모든 레이아웃에는 동일한 양의 행이 있어야 합니다.
레이아웃 추가 칩을 클릭하여 열 Add Layout
/제거하거나 레이아웃 칩을 왼쪽/오른쪽으로 드래그하여 순서를 바꾸세요.
각 레이아웃에 대한 특정 설정을 열 수와 너비로 지정합니다. 설정은 현재 선택된 레이아웃을 참조합니다.
더 많은 열/행을 확장할 수 있도록 레이아웃 미리 보기에서 열 셀의 크기를 조정하거나 Delete
버튼을 사용하여 셀을 지울 수 있습니다.
원하는 위치에 열 칩을 드래그하여 미리보기에서 열을 설정하세요.
Add Column
칩을 사용하여 새 열을 추가/제거합니다.
예를 들어 NgForOf
사용하여 템플릿에서 사용 및 구문 분석할 수도 있는 igxGrid 또는 JSON 표현 내부에 배치하여 전체 구성의 템플릿 출력을 가져옵니다.
기본적으로 이전 샘플과 동일한 열을 설정했지만 원하는 구성에 맞게 지우고 구성할 수 있습니다.
스타일링
igxGrid를 사용하면 스타일을 지정할 수 있습니다 Ignite UI for Angular Theme Library
. grid-theme
그리드의 모든 기능을 사용자 지정할 수 있는 다양한 속성을 노출합니다.
아래 단계에서는 그리드의 다중 행 레이아웃 스타일을 사용자 정의하는 단계를 진행합니다.
글로벌 테마 가져오기
다중 행 레이아웃 기능의 사용자 정의를 시작하려면 모든 스타일링 기능과 믹스인이 있는 index
파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
scss
맞춤 테마 정의
다음으로, 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
);
scss
우리가 방금 한 것처럼 색상 값을 하드 코딩하는 대신, and color
함수를 사용하여 palette
색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 지침은 항목을 참조하십시오 Palettes
.
사용자 정의 테마 적용
테마를 적용하는 가장 쉬운 방법은 전역 스타일 파일에 sass
@include
문을 사용하는 것입니다.
@include css-vars($custom-theme );
scss
사용자 정의 테마가 특정 구성 요소에만 영향을 미치도록 하려면 방금 정의한 모든 스타일을 전역 스타일 파일에서 사용자 정의 구성 요소의 스타일 파일로 이동할 수 있습니다(index
파일 가져오기 포함).
이렇게 하면 Angular의 ViewEncapsulation 덕분에 사용자 정의 구성 요소에만 스타일이 적용됩니다.
데모
import { Component, ViewEncapsulation } from '@angular/core' ;
import { DefaultSortingStrategy, SortingDirection, IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent } from 'igniteui-angular' ;
import { DATA } from '../../data/customers' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
@Component ({
selector : 'app-grid-multi-row-layout-styling-sample' ,
styleUrls : ['./grid-multi-row-layout-styling.component.scss' ],
templateUrl : './grid-multi-row-layout-styling.component.html' ,
imports : [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnLayoutComponent, IgxColumnComponent]
})
export class GridMultiRowLayoutStylingComponent {
public sourceData = DATA;
public group = [
{
dir : SortingDirection.Asc,
fieldName : 'Country' ,
ignoreCase : false ,
strategy : DefaultSortingStrategy.instance()
}
];
public sort = [
{
dir : SortingDirection.Desc,
fieldName : 'CompanyName' ,
ignoreCase : true
}
];
}
ts コピー <div class ="wrapper" >
<igx-grid [igxPreventDocumentScroll ]="true" #grid
[width ]="'100%'"
height ="720px"
[data ]="sourceData"
[autoGenerate ]="false"
[sortingExpressions ]="sort" >
<igx-column-layout [header ]="'ID'" >
<igx-column [rowStart ]="1" [colStart ]="1" [rowEnd ]="3" field ="ID" [filterable ]="false" > </igx-column >
</igx-column-layout >
<igx-column-layout [header ]="'Contact Details'" >
<igx-column [rowStart ]="1" [colStart ]="1" [colEnd ]="3" field ="CompanyName" [header ]="'Company Name'" [sortable ]="true" > </igx-column >
<igx-column [rowStart ]="2" [colStart ]="1" [colEnd ]="2" field ="ContactName" [header ]="'Contact Name'" > </igx-column >
<igx-column [rowEnd ]="3" [rowStart ]="2" [colStart ]="2" [colEnd ]="3" field ="ContactTitle" [header ]="'Contact Title'" > </igx-column >
</igx-column-layout >
<igx-column-layout [header ]="'Address Details'" >
<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" [header ]="'Postal Code'" [filterable ]="false" > </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 [header ]="'Phone Details'" >
<igx-column [rowStart ]="1" [colStart ]="1" [colEnd ]="2" field ="Phone" > </igx-column >
<igx-column [rowStart ]="2" [colStart ]="1" [colEnd ]="2" field ="Fax" > </igx-column >
</igx-column-layout >
</igx-grid >
</div >
html コピー @use "layout.scss" ;
@use "igniteui-angular/theming" as *;
$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
);
@include css-vars($custom-theme );
scss コピー
샘플은 Change Theme
에서 선택한 전역 테마의 영향을 받지 않습니다.
API 참조
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.