그리드 열 재정렬 및 이동

    Ignite UI for Angular의 Grid 구성 요소는 표준 드래그/드롭 마우스 또는 터치 제스처를 통해 또는 Column Moving API를 사용하여 열을 재정렬할 수 있는 Column Moving 기능을 제공합니다. 열 이동은 고정된 열과 고정되지 않은 열, 그리고 다중 열 헤더에서 모두 작동합니다. 열을 고정된 영역으로 이동하면 열이 고정되고 그 반대의 경우도 마찬가지이며, 열을 고정된 영역 밖으로 이동하면 열이 고정 해제됩니다.

    Note

    열과 열 그룹 간의 재정렬은 계층 구조에서 동일한 수준에 있고 둘 다 동일한 그룹에 있는 경우에만 허용됩니다. 최상위 열인 경우 열/열 그룹 간 이동이 허용됩니다.

    Note

    열 헤더가 템플릿화되어 있고 Column Moving이 활성화되어 있거나 해당 열이 그룹화될 수 있다면, 템플릿 요소들은 드래그 가능한 속성이 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-그리드는 이동 가능한 열과 이동 불가능한 열 중 하나를 가질 수 있습니다. 이 작업은 의 입력moving을 통해igx-grid 이루어집니다.

    <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를 사용할 때 속성을 true로 설정할moving 필요가 없다는 점도 유의하세요.

    이벤트

    열의 드래그 앤 드롭 작업을 활용할 수 있도록 열이 이동하는 것과 관련된 여러 이벤트가 있습니다. 이것들은 그리columnMovingStart 고columnMoving.columnMovingEnd 열이 새로운 위치로 이동할 때 이벤트에 구독columnMovingEnd​igx-grid 하여 일부 사용자 정의 로직을 구현할 수 있습니다. 예를 들어, 연도 변경 열(%) 이후 카테고리 삭제를 취소할 수 있습니다.

    <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
);
    Note

    우리가 방금 한 것처럼 색상 값을 하드코딩하는 대신, andpalette 함수를 사용color 해 색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 안내는 해당 주제를 참고Palettes 해 주세요.

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

    @include css-vars($dark-grid-column-moving-theme);

    Demo

    Note

    샘플은 선택된 글로벌 테마Change Theme의 영향을 받지 않습니다.

    API References

    Additional Resources

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