계층적 Data Grid 개요 및 구성

    Ignite UI for Web Components 계층적 데이터 그리드는 계층적 테이블 형식 데이터를 표시하고 조작하는 데 사용됩니다. 아주 적은 코드로 데이터를 빠르게 바인딩하거나 다양한 이벤트를 사용하여 다양한 동작을 사용자 지정할 수 있습니다. 이 구성 요소는 데이터 선택, Excel 스타일 필터링, 정렬, 페이징, 템플릿, 열 이동, 열 고정, Excel 및 CSV로 내보내기 등과 같은 다양한 기능을 제공합니다. 계층적 그리드는 플랫 그리드 컴포넌트를 기반으로 하며, 사용자가 부모 그리드의 행을 확장하거나 축소할 수 있도록 하여 기능을 확장하고, 더 자세한 정보가 필요할 때 해당 자식 그리드를 표시합니다.

    Web Components Hierarchical Data Grid Example

    이 Web Components 표 예제에서는 사용자가 계층적 데이터 집합을 시각화하고 셀 템플릿을 사용하여 다른 시각적 구성 요소를 추가하는 방법을 확인할 수 있습니다.

    Getting Started with Ignite UI for Web Components Hierarchical Grid

    Dependencies

    Web Components 계층적 그리드를 시작하려면 먼저 패키지를 설치해야 igniteui-webcomponents-grids 합니다.

    npm install --save igniteui-webcomponents-grids

    그리드를 사용하려면 다음 가져오기도 포함해야 합니다.

    import 'igniteui-webcomponents-grids/grids/combined.js';

    해당 스타일도 참조해야 합니다. 테마 중 하나에 대해 밝거나 어두운 옵션을 선택하고 프로젝트 구성에 따라 테마를 가져올 수 있습니다.

    import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';

    또는 연결하려면 다음을 수행하세요.

    <link rel='stylesheet' href='node_modules/igniteui-webcomponents-grids/grids/themes/light/bootstrap.css'>

    계층적 그리드의 모양을 사용자 지정하는 방법에 대한 자세한 내용은 스타일 섹션을 참조하십시오.

    Using the Web Components Hierarchical Data Grid

    Data Binding

    ​igc-hierarchical-grid는 igc-grid에서 파생되며 대부분의 기능을 공유합니다. 주요 차이점은 여러 수준의 계층 구조를 정의할 수 있다는 것입니다. igc-row-island 라고 하는 igc-hierarchical-grid의 정의 내에서 별도의 태그를 통해 구성됩니다. igc-row-island 구성 요소는 특정 수준의 각 하위 그리드에 대한 구성을 정의합니다. 수준당 여러 행 고립영역도 지원됩니다. 계층적 그리드는 데이터에 바인딩하는 두 가지 방법을 지원합니다.

    Using hierarchical data

    애플리케이션이 전체 계층 데이터를 개체의 하위 배열을 참조하는 개체 배열로 로드하는 경우 계층 그리드는 이를 읽고 자동으로 바인딩하도록 구성할 수 있습니다. 다음은 적절하게 구조화된 계층적 데이터 원본의 예입니다.

    export const singers = [{
    "Artist": "Naomí Yepes",
    "Photo": "assets/images/hgrid/naomi.png",
    "Debut": "2011",
    "Grammy Nominations": 6,
    "Grammy Awards": 0,
    "Tours": [{
        "Tour": "Faithful Tour",
        "Started on": "Sep-12",
        "Location": "Worldwide",
        "Headliner": "NO",
        "Toured by": "Naomí Yepes"
    }],
    "Albums": [{
        "Album": "Dream Driven",
        "Launch Date": new Date("August 25, 2014"),
        "Billboard Review": "81",
        "US Billboard 200": "1",
        "Artist": "Naomí Yepes",
        "Songs": [{
            "No.": "1",
            "Title": "Intro",
            "Released": "*",
            "Genre": "*",
            "Album": "Dream Driven"
        }]
    }]
}];

    각 igc-row-island는 하위 데이터를 보유하는 속성의 키를 지정해야 합니다.

    <igc-hierarchical-grid auto-generate="true">
    <igc-row-island child-data-key="Albums" auto-generate="true">
        <igc-row-island child-data-key="Songs" auto-generate="true">
        </igc-row-island>
    </igc-row-island>
    <igc-row-island child-data-key="Tours" auto-generate="true">
    </igc-row-island>
</igc-hierarchical-grid>

    [!NOTE] Note that instead of data the user configures only the childDataKey that the igc-hierarchical-grid needs to read to set the data automatically.

    Using Load-On-Demand

    대부분의 응용 프로그램은 초기에 가능한 한 적은 데이터를 로드하도록 설계되어 로드 시간이 더 빨라집니다. 이러한 경우 igc-hierarchical-grid는 사용자가 만든 서비스가 요청 시 데이터를 제공할 수 있도록 구성할 수 있습니다.

    <igc-hierarchical-grid id="hGrid" primary-key="customerId" auto-generate="true" height="600px" width="100%">
    <igc-row-island id="ordersRowIsland" child-data-key="Orders" primary-key="orderId" auto-generate="true">
        <igc-row-island id="orderDetailsRowIsland" child-data-key="Details" primary-key="productId" auto-generate="true"></igc-row-island>
    </igc-row-island>
</igc-hierarchical-grid>

    import { getData } from "./remoteService";

export class HierarchicalGridLoadOnDemand {
    constructor() {
        const hierarchicalGrid = document.getElementById("hGrid") as IgcHierarchicalGridComponent;
        const ordersRowIsland = document.getElementById("ordersRowIsland");
        const orderDetailsRowIsland = document.getElementById("orderDetailsRowIsland");

        ordersRowIsland.addEventListener("gridCreated", (event: any) => {
            this.gridCreated(event, "Customers");
        });
        orderDetailsRowIsland.addEventListener("gridCreated", (event: any) => {
            this.gridCreated(event, "Orders");
        });

        hierarchicalGrid.isLoading = true;

        getData({ parentID: null, rootLevel: true, key: "Customers" }).then((data: any) => {
            hierarchicalGrid.isLoading = false;
            hierarchicalGrid.data = data;
            hierarchicalGrid.markForCheck();
        });
    }

    public gridCreated(event: CustomEvent<IgcGridCreatedEventArgs>, _parentKey: string) {
        const context = event.detail;
        const dataState = {
            key: context.owner.childDataKey,
            parentID: context.parentID,
            parentKey: _parentKey,
            rootLevel: false
        };
        context.grid.isLoading = true;
        getData(dataState).then((data: any[]) => {
            context.grid.isLoading = false;
            context.grid.data = data;
            context.grid.markForCheck();
        });
    }
}

    const URL = `https://data-northwind.indigo.design/`;

export function getData(dataState: any): any {
    return fetch(buildUrl(dataState))
        .then((result) => result.json());
}

function buildUrl(dataState: any) {
    let qS = "";
    if (dataState) {
        if (dataState.rootLevel) {
            qS += `${dataState.key}`;
        } else {
            qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
        }
    }
    return `${URL}${qS}`;
}

    Hide/Show row expand indicators

    행을 확장하기 전에 자식이 있는지 여부에 대한 정보를 제공하는 방법이 있는 경우 input 속성을 사용할 HasChildrenKey 수 있습니다. 이렇게 하면 데이터 개체에서 확장 표시기를 표시해야 하는지 여부를 나타내는 부울 속성을 제공할 수 있습니다.

    <igc-hierarchical-grid data="data" primary-key="ID" has-children-key="hasChildren">
</igc-hierarchical-grid>

    속성을 설정할 HasChildrenKey 필요는 없습니다. 제공하지 않으면 각 행에 확장 표시기가 표시됩니다.

    또한 머리글 확장/축소 표시기를 ShowExpandAll 표시하거나 숨기려면 속성을 사용할 수 있습니다. 이 UI는 성능상의 이유로 기본적으로 사용하지 않도록 설정되며, 대용량 데이터가 있는 그리드 또는 요청 시 로드가 있는 그리드에서는 사용하지 않는 것이 좋습니다.

    특징

    그리드 기능은 igc-row-island 마크업을 통해 활성화 및 구성할 수 있으며, 생성된 모든 그리드에 적용됩니다. 행 섬 인스턴스를 통해 런타임에 옵션을 변경하면 생성된 각 그리드에 대해 옵션이 변경됩니다.

    <igc-hierarchical-grid data="localData" auto-generate="false"
    allow-filtering='true' height="600px" width="800px">
    <igc-column field="ID" pinned="true" filterable="true"></igc-column>
    <igc-column-group header="Information">
        <igc-column field="ChildLevels"></igc-column>
        <igc-column field="ProductName" has-summary="true"></igc-column>
    </igc-column-group>
    <igc-row-island child-data-key="childData" auto-generate="false" row-selection="multiple">
        <igc-column field="ID" has-summary="true" data-type="number"></igc-column>
        <igc-column-group header="Information2">
            <igc-column field="ChildLevels"></igc-column>
            <igc-column field="ProductName"></igc-column>
        </igc-column-group>
        <igc-paginator per-page="5"></igc-paginator>
    </igc-row-island>
    <igc-paginator>
    </igc-paginator>
</igc-hierarchical-grid>

    다음 그리드 기능은 그리드 수준별로 작동합니다. 즉, 각 그리드 인스턴스가 나머지 그리드와 독립적으로 해당 기능을 관리합니다.

    • 정렬
    • 필터링
    • 페이징
    • 다중 열 헤더
    • 숨김
    • 고정
    • 움직이는
    • 요약
    • 찾다

    Selection(선택) 및 Navigation(탐색) 기능은 전체 계층적 그리드(Hierarchical Grid)에 대해 전역적으로 작동합니다

    • 선택 선택에서는 두 개의 서로 다른 하위 그리드에 대해 선택한 셀이 동시에 표시되는 것을 허용하지 않습니다.
    • 탐색 위/아래로 탐색할 때 다음/이전 요소가 하위 그리드인 경우 관련 하위 그리드에서 탐색이 계속되며 관련 셀이 선택되고 초점이 맞춰진 것으로 표시됩니다. 하위 셀이 현재 표시되는 뷰 포트 외부에 있는 경우 선택한 셀이 항상 표시되도록 뷰로 스크롤됩니다.

    Collapse All Button

    계층적 그리드를 사용하면 사용자는 왼쪽 상단 모서리에 있는 "모두 축소" 버튼을 눌러 현재 확장된 모든 행을 편리하게 축소할 수 있습니다. 또한 다른 그리드를 포함하고 계층적 그리드 자체인 모든 하위 그리드에도 다음과 같은 버튼이 있습니다. 이 방법으로 사용자는 계층 구조에서 지정된 그리드만 축소할 수 있습니다.

    Styling

    사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 헤더 배경과 텍스트 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

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

    그런 다음 해당 클래스에 대해--header-background 및--header-text-color CSS 속성을 설정합니다.

    .grid {
    --header-background: #494949;
    --header-text-color: #FFF;
}

    Demo

    Known Limitations

    한정 설명
    그룹화 기준 그룹화 기준 기능은 계층형 그리드에서 지원되지 않습니다.

    API References

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