그리드 열 재정렬 및 이동
Ignite UI for Angular의 그리드 구성 요소는 표준 드래그/드롭 마우스 또는 터치 제스처를 통해 또는 Column Moving API를 사용하여 열을 재정렬할 수 있는 열 이동 기능을 제공합니다. 열 이동은 고정된 열과 고정되지 않은 열, 다중 열 머리글 모두에서 작동합니다. 열을 고정된 영역으로 이동하면 열이 고정되고, 그 반대로 열을 고정된 영역 밖으로 이동하면 열의 고정이 해제됩니다.
Note
열과 열 그룹 간의 재정렬은 계층 구조에서 동일한 수준에 있고 둘 다 동일한 그룹에 있는 경우에만 허용됩니다. 최상위 열인 경우 열/열 그룹 간 이동이 허용됩니다.
Note
열 헤더가 템플릿화되어 있고 열 이동이 활성화되어 있거나 해당 열이 그룹화 가능한 경우 템플릿 요소는 draggable 속성을 false로 설정해야 합니다! 이를 통해 요소에서 발생하는 모든 이벤트에 대한 핸들러를 연결할 수 있습니다. 그렇지 않으면 이벤트가 igxDrag 지시어에 의해 소비됩니다.
Note
고정된 영역이 최대 허용 너비(전체 그리드 너비의 80%)를 초과하는 경우 시각적 단서가 최종 사용자에게 놓기 작업이 금지되어 고정이 불가능함을 알려줍니다. 즉, 고정된 영역에 열을 놓을 수 없습니다.
<ng-template igxHeader>
<igx-icon [attr.draggable]="false" (click)="onClick()"></igx-icon>
</ng-template>
Angular Grid Column Moving Overview Example
개요
열 이동 기능은 그리드별 수준에서 활성화됩니다. 즉, igx-grid에는 이동 가능하거나 움직일 수 없는 열이 있을 수 있습니다. 이는 igx-grid의 moving 입력을 통해 수행됩니다.
<igx-grid [moving]="true"></igx-grid>
API
끌어서 놓기 기능 외에도 열 이동 기능은 프로그래밍 방식으로 열 이동/열 재정렬을 허용하는 두 가지 API 메서드도 제공합니다.
moveColumn- 다른 열(대상) 앞이나 뒤로 열을 이동합니다. 첫 번째 매개변수는 이동할 컬럼이고, 두 번째 매개변수는 대상 컬럼입니다. 또한 대상 열 앞이나 뒤에 열을 배치할지 여부를 결정하는 선택적인 세 번째 매개 변수 position (DropPosition 값을 나타냄)를 허용합니다.
// Move the ID column after the Name column
const idColumn = grid.getColumnByName("ID");
const nameColumn = grid.getColumnByName("Name");
grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget);
move- 열을 지정된 표시 인덱스로 이동합니다. 전달된 인덱스 매개변수가 유효하지 않은 경우(음수이거나 열 수를 초과하는 경우) 또는 열이 이 인덱스로 이동할 수 없는 경우(다른 그룹 내에 있는 경우) 작업이 수행되지 않습니다.
// Move the ID column at 3rd position.
const idColumn = grid.getColumnByName("ID");
idColumn.move(3);
API를 사용할 때 작업이 성공하면 columnMovingEnd 이벤트만 발생합니다. 또한 드래그 앤 드롭 기능과 비교하여 API를 사용하면 moving 속성을 true로 설정할 필요가 없습니다.
이벤트
열의 끌어서 놓기 작업을 탭하기 위한 수단을 제공하기 위해 열 이동과 관련된 여러 이벤트가 있습니다. 이들은 columnMovingStart, columnMoving 및 columnMovingEnd 입니다. igx-grid의 columnMovingEnd 이벤트를 구독하면 열이 새 위치로 삭제될 때 일부 사용자 지정 논리를 구현할 수 있습니다. 예를 들어, Change On Year(%) 열 이후에 범주 삭제를 취소할 수 있습니다.
<igx-grid #dataGrid [data]="data" [autoGenerate]="false" [moving]="true" (columnMovingEnd)="onColumnMovingEnd($event)">
<igx-column [field]="'Category'"></igx-column>
<igx-column [field]="'Change On Year(%)'" [dataType]="'number'" ></igx-column>
</igx-grid>
public onColumnMovingEnd(event) {
if (event.source.field === "Category" && event.target.field === "Change On Year(%)") {
event.cancel = true;
}
}
스타일링
그리드 열 이동 헤더의 스타일 지정을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
가장 간단한 접근 방식에 따라 grid-theme 확장하고 $ghost-header-background, $ghost-header-text-color 및 $ghost-header-icon-color 매개변수를 허용하는 새로운 테마를 만듭니다.
// Define dark theme for the column moving
$dark-grid-column-moving-theme: grid-theme(
$ghost-header-text-color: #F4D45C,
$ghost-header-background: #575757,
$ghost-header-icon-color: #f4bb5c
);
마지막 단계는 해당 테마와 함께 구성 요소 믹스인을 포함하는 것입니다.
@include grid($dark-grid-column-moving-theme);
Note
구성요소 뷰 캡슐화 전략에 따라::ng-deep 사용하여 이 캡슐화를 penetrate 해야 할 수도 있습니다.
:host {
::ng-deep {
@include grid($dark-grid-column-moving-theme);
}
}
Defining a color palette
방금 했던 것처럼 색상 값을 하드코딩하는 대신 igx-palette 및 igx-color 기능을 사용하면 색상 측면에서 더 큰 유연성을 얻을 수 있습니다.
igx-palette는 전달된 기본 색상과 보조 색상을 기반으로 색상 팔레트를 생성합니다.
$yellow-color: #F4D45C;
$black-color: #575757;
$dark-palette: palette($primary: $yellow-color, $secondary: $black-color);
그런 다음 igx-color를 사용하면 팔레트에서 색상을 쉽게 검색할 수 있습니다.
$dark-grid-column-moving-theme: grid-theme(
$palette: $dark-palette,
$ghost-header-text-color: color($dark-palette, "primary", 400),
$ghost-header-background: color($dark-palette, "secondary", 200),
$ghost-header-icon-color: color($dark-palette, "primary", 500)
);
Note
색상과 팔레트는 색상을 생성하고 검색하는 강력한 기능입니다. 사용 방법에 대한 자세한 지침은 Palettes 항목을 참조하세요.
Using Schemas
테마 엔진을 사용하면 스키마의 이점을 활용하는 강력하고 유연한 구조를 구축할 수 있습니다. 스키마는 테마의 레시피입니다.
모든 구성 요소(이 경우 light-grid)에 대해 제공되는 사전 정의된 두 스키마 중 하나를 확장합니다.
// Extending the dark grid schema
$dark-grid-column-moving-schema: extend($_light-grid,
(
ghost-header-text-color:(
color: ("primary", 400)
),
ghost-header-background:(
color: ("secondary", 200)
),
ghost-header-icon-color:(
color:( "primary", 500)
)
)
);
사용자 정의 스키마를 적용하려면 다음을 수행해야 합니다. 연장하다 전역 변수 중 하나(빛 또는 어두운), 이는 기본적으로 사용자 정의 스키마로 구성 요소를 지적한 후 해당 구성 요소 테마에 추가합니다.
// Extending the global dark-schema
$custom-light-schema: extend($light-schema,(
igx-grid: $dark-grid-column-moving-schema,
));
// Defining dark-grid-theme with the global dark schema
$dark-grid-column-moving-theme: grid-theme(
$palette: $dark-palette,
$schema: $custom-light-schema
);
위에서 설명한 것과 동일한 방식으로 테마를 포함하는 것을 잊지 마십시오.
Demo
Note
샘플은 Change Theme에서 선택한 전역 테마의 영향을 받지 않습니다.
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub