계층형 그리드 열 재정렬 및 이동

    Ignite UI for Web Components의 Web Components 계층적 그리드 열 이동 기능을 사용하면 빠르고 쉽게 열을 재정렬할 수 있습니다. 이는 열 이동 API를 통해 수행하거나 마우스나 터치 제스처를 통해 헤더를 다른 위치로 끌어서 놓아서 수행할 수 있습니다. Web Components 계층적 그리드에서 고정 및 고정 해제된 열과 다중 열 헤더에 대한 열 이동을 활성화할 수 있습니다.

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

    열 머리글이 템플릿화되어 있고 열 이동이 활성화되어 있거나 해당 열이 그룹화 가능한 경우 템플릿 요소는 draggable 속성을 false로 설정해야 합니다!

    고정된 영역이 최대 허용 너비(총 IgcHierarchicalGridComponent 너비의 80%)를 초과하는 경우 시각적 단서는 최종 사용자에게 놓기 작업이 금지되고 고정이 불가능하다는 것을 알립니다. 즉, 고정된 영역에 열을 놓을 수 없습니다.

    public headerTemplate = (ctx: IgcCellTemplateContext) => {
    return html`
        <igc-icon draggable="false" @click="${() => this.onClick()}"></igc-icon>
    `;
}
ts

    Web Components 계층적 그리드 열 이동 개요 예

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    개요

    기둥 이동 기능은 그리드별 수준에서 활성화되며, 이는 이동 가능한 또는 이동 불가능한 기둥을 IgcHierarchicalGridComponent 가질 수 있음을 의미합니다. 이것은 의 IgcHierarchicalGridComponent 입력을 moving 통해 수행됩니다.

    <igc-hierarchical-grid moving="true">
    ...
    <igc-row-island moving="true"></igc-row-island>
</igc-hierarchical-grid>
html
    Ignite UI for Web Components | CTA 배너

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

    move- 열을 지정된 표시 인덱스로 이동합니다. 전달된 인덱스 매개변수가 유효하지 않은 경우(음수이거나 열 수를 초과하는 경우) 또는 열이 이 인덱스로 이동할 수 없는 경우(다른 그룹 내에 있는 경우) 작업이 수행되지 않습니다.

    // Move the ID column at 3rd position.
const idColumn = grid.getColumnByName("ID");
idColumn.move(3);
typescript

    열 이동 기능을 사용할 때 작업이 성공하면 ColumnMovingEnd 이벤트가 발생합니다. 또한 끌어서 놓기 기능과 비교할 때 열 이동 기능을 사용하려면 moving 속성을 true로 설정할 필요가 없습니다.

    이벤트

    열의 끌어서 놓기 작업을 탭하기 위한 수단을 제공하기 위해 열 이동과 관련된 여러 이벤트가 있습니다. 이는 ColumnMovingStart, ColumnMoving 및 ColumnMovingEnd 입니다.

    를 구독할 수 있습니다. ColumnMovingEnd의 이벤트 IgcHierarchicalGridComponent 열을 새 위치로 놓을 때 일부 사용자 지정 논리를 구현합니다. 예를 들어, 드롭을 취소할 수 있습니다. 범주 열 뒤의 연간 변동률(%) 다음 코드 스니펫의 열입니다.

    <igc-hierarchical-grid id="dataGrid" auto-generate="false" moving="true">
    <igc-column field="Category"></igc-column>
    <igc-column field="Change On Year(%)" data-type="Number" ></igc-column>
</igc-hierarchical-grid>
html
    constructor() {
    var dataGrid = this.dataGrid = document.getElementById('dataGrid') as IgcHierarchicalGridComponent;
    dataGrid.data = this.data;
    dataGrid.addEventListener("columnMovingEnd", this.onColumnMovingEnd);
}
typescript
    public onColumnMovingEnd(event) {
    if (event.detail.source.field === "Category" && event.detail.target.field === "Change On Year(%)") {
        event.detail.cancel = true;
    }
}
typescript

    스타일링

    사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다.

    일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

    <igc-hierarchical-grid class="grid"></igc-hierarchical-grid>
html

    그런 다음 관련 CSS 속성을 이 클래스로 설정합니다.

    .grid {
    --ig-grid-ghost-header-text-color: #f4d45c;
    --ig-grid-ghost-header-background: #ad9d9d;
    --ig-grid-ghost-header-icon-color: #f4d45c;
}
css

    데모

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    API 참조

    추가 리소스

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