Web Components 계층적 그리드 가상화 및 성능

Ignite UI for Web Components에서 컨트롤은 IgcHierarchicalGridComponent 콘텐츠를 세로 및 가로로 가상화합니다.

Web Components 계층적 그리드 가상화 및 성능 예

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}`;
}ts

import { IgcGridCreatedEventArgs, IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
import { getData } from './RemoteService';
import 'igniteui-webcomponents-grids/grids/combined';
import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';

export class Sample {
    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();
        });
    }
}

new Sample();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Sample | Ignite UI | Web Components | infragistics</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
  <link rel="stylesheet" href="/src/index.css" type="text/css" />

</head>

<body>
  <div id="root">
    <div class="container sample">
      <div class="container fill">

        <igc-hierarchical-grid id="hGrid" primary-key="customerId" height="600px">
          <igc-column field="customerId" hidden="true"></igc-column>
          <igc-column field="companyName" header="Company Name"></igc-column>
          <igc-column field="contactName" header="Contact Name"></igc-column>
          <igc-column field="contactTitle" header="Contact Title"></igc-column>
          <igc-column field="address.country" header="Country"></igc-column>
          <igc-column field="address.phone" header="Phone"></igc-column>
          
          <igc-row-island id="ordersRowIsland" child-data-key="Orders" primary-key="orderId">
            <igc-column field="orderId" hidden="true"></igc-column>
            <igc-column field="shipAddress.country" header="Ship Country"></igc-column>
            <igc-column field="shipAddress.city" header="Ship City"></igc-column>
            <igc-column field="shipAddress.street" header="Ship Address"></igc-column>
            <igc-column field="orderDate" header="Order Date" data-type="date"></igc-column>

            <igc-row-island id="orderDetailsRowIsland" child-data-key="Details" primary-key="productId">
              <igc-column field="productId" hidden="true"></igc-column>
              <igc-column field="quantity" header="Quantity"></igc-column>
              <igc-column field="unitPrice" header="Unit Price"></igc-column>
              <igc-column field="discount" header="Discount"></igc-column>
            </igc-row-island>
          </igc-row-island>
        </igc-hierarchical-grid>

      </div>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

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

가상화 활성화

IgcHierarchicalGridComponent 이제 뷰 포트에 현재 표시되는 것만 렌더링하고 사용자가 데이터를 가로/세로로 스크롤하는 동안 표시된 데이터를 교체하여 DOM 렌더링 및 메모리 소비를 최적화합니다. width와 IgcHierarchicalGridComponent height 기본값은 100% 표시된 콘텐츠가 사용 가능한 공간 내에 들어갈 수 없고 스크롤 막대가 세로 또는 가로로 필요한 경우 가상화를 사용하도록 설정합니다.

그러나 명시적으로 설정할 수도 있습니다. IgcHierarchicalGridComponent의 width 및/또는 height 받는 사람 null 즉, 관련 치수는 내부 항목의 총 크기에 따라 결정됩니다. 그러면 스크롤바가 표시되지 않고 모든 항목이 해당 차원을 따라 렌더링됩니다(width 다음과 같음 null 및 행 if height 다음과 같음 null).

데이터 청크의 크기는 다음에 의해 결정됩니다.

수직(행) 가상화의 행 높이입니다. rowHeight 옵션에 의해 결정되며 기본적으로 50(px)입니다.
horizontal (column) virtualization에 대한 개별 열 너비(픽셀)The individual column widths in pixels for the horizontal (column) virtualization. 각 열 구성 요소에 대해 명시적 너비를 설정하거나 명시적 너비가 설정되지 않은 모든 열에 적용되는 옵션을 설정하여 IgcHierarchicalGridComponent columnWidth 결정할 수 있습니다.

대부분의 경우 치수를 설정하지 않은 상태로 두어 그리드가 기본 동작을 적용하도록 하면 원하는 레이아웃이 생성됩니다. 열 너비의 경우 열 수, 너비가 설정된 열 및 컨테이너의 IgcHierarchicalGridComponent 계산된 너비에 의해 결정됩니다. 그리드는 할당하려는 너비가 136(px) 미만이 아닌 한 사용 가능한 공간 내의 모든 열을 맞추려고 합니다. 이러한 경우 너비가 할당되지 않은 열은 최소 너비인 136(px)을 받고 가로 스크롤 막대가 표시됩니다. 그리드는 수평으로 가상화됩니다.

열 너비를 백분율(%)로 명시적으로 설정하면 대부분의 경우 수평 스크롤 막대가 없기 때문에 수평으로 가상화되지 않는 그리드가 생성됩니다.

가상화 제한

Mac OS에서 "스크롤 할 때만 스크롤 막대 표시"시스템 옵션이 true (기본값)로 설정되어 있으면 가로 스크롤 막대가 표시되지 않습니다. 이는 행 컨테이너에 오버플로가 hidden으로 설정되어 있기 때문입니다 IgcHierarchicalGridComponent. 옵션을 "항상"으로 변경하면 스크롤바가 나타납니다.

자주하는 질문

가상화가 작동하기 위해 계층적 그리드에 차원이 있어야 하는 이유는 무엇인가요?

컨테이너와 항목을 렌더링하기 전에 컨테이너와 항목의 크기에 대한 정보가 없으면 스크롤 막대의 너비 또는 높이를 설정하거나 에서 임의의 위치로 IgcHierarchicalGridComponent 스크롤할 때 뷰에 있어야 하는 항목을 결정하는 것이 잘못되었습니다. 실제 치수가 무엇인지에 대한 가정은 스크롤바의 부자연스러운 동작으로 이어질 수 있으며 궁극적으로 최종 사용자에게 최적화되지 않은 경험을 제공할 수 있습니다. 따라서 가상화가 적용되기 위해 관련 차원 설정이 적용됩니다.

API 참조

추가 리소스

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