요청 시 트리 그리드 로드

Ignite UI for Web Components 서버에서 최소한의 데이터만 가져와서 사용자가 가능한 한 빨리 볼 수 있도록 렌더링할 수 있습니다. 그런 다음 사용자가 행을 확장한 후에만 해당 부모 행의 자식이 로드됩니다. 이 메커니즘은 Load on Demand라고도 하며, 모든 원격 데이터와 함께 작동하도록 쉽게 구성할 수 있습니다.

Web Components 트리 그리드 주문형 로드 예제

EXAMPLE

DATA

TS

HTML

CSS

export class EmployeesFlatDataItem {
    public constructor(init: Partial<EmployeesFlatDataItem>) {
        Object.assign(this, init);
    }

    public Age: number;
    public HireDate: string;
    public ID: number;
    public Name: string;
    public Phone: string;
    public OnPTO: boolean;
    public ParentID: number;
    public Title: string;
    public hasEmployees: boolean;

}
export class EmployeesFlatData extends Array<EmployeesFlatDataItem> {
    public constructor() {
        super();
        this.push(new EmployeesFlatDataItem(
        {
            Age: 55,
            HireDate: `2008, 3, 20`,
            ID: 1,
            Name: `Johnathan Winchester`,
            Phone: `0251-031259`,
            OnPTO: false,
            ParentID: -1,
            Title: `Development Manager`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 42,
            HireDate: `2014, 1, 22`,
            ID: 4,
            Name: `Ana Sanders`,
            Phone: `(21) 555-0091`,
            OnPTO: true,
            ParentID: -1,
            Title: `CEO`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 49,
            HireDate: `2014, 1, 22`,
            ID: 18,
            Name: `Victoria Lincoln`,
            Phone: `(071) 23 67 22 20`,
            OnPTO: true,
            ParentID: -1,
            Title: `Accounting Manager`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 61,
            HireDate: `2010, 1, 1`,
            ID: 10,
            Name: `Yang Wang`,
            Phone: `(21) 555-0091`,
            OnPTO: false,
            ParentID: -1,
            Title: `Localization Manager`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 43,
            HireDate: `2011, 6, 3`,
            ID: 3,
            Name: `Michael Burke`,
            Phone: `0452-076545`,
            OnPTO: true,
            ParentID: 1,
            Title: `Senior Software Developer`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 29,
            HireDate: `2009, 6, 19`,
            ID: 2,
            Name: `Thomas Anderson`,
            Phone: `(14) 555-8122`,
            OnPTO: false,
            ParentID: 1,
            Title: `Senior Software Developer`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 31,
            HireDate: `2014, 8, 18`,
            ID: 11,
            Name: `Monica Reyes`,
            Phone: `7675-3425`,
            OnPTO: false,
            ParentID: 1,
            Title: `Software Development Team Lead`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 35,
            HireDate: `2015, 9, 17`,
            ID: 6,
            Name: `Roland Mendel`,
            Phone: `(505) 555-5939`,
            OnPTO: false,
            ParentID: 11,
            Title: `Senior Software Developer`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 44,
            HireDate: `2009, 10, 11`,
            ID: 12,
            Name: `Sven Cooper`,
            Phone: `0695-34 67 21`,
            OnPTO: true,
            ParentID: 11,
            Title: `Senior Software Developer`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 44,
            HireDate: `2014, 4, 4`,
            ID: 14,
            Name: `Laurence Johnson`,
            Phone: `981-443655`,
            OnPTO: false,
            ParentID: 4,
            Title: `Director`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 25,
            HireDate: `2017, 11, 9`,
            ID: 5,
            Name: `Elizabeth Richards`,
            Phone: `(2) 283-2951`,
            OnPTO: true,
            ParentID: 4,
            Title: `Vice President`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 39,
            HireDate: `2010, 3, 22`,
            ID: 13,
            Name: `Trevor Ashworth`,
            Phone: `981-443655`,
            OnPTO: true,
            ParentID: 5,
            Title: `Director`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 44,
            HireDate: `2014, 4, 4`,
            ID: 17,
            Name: `Antonio Moreno`,
            Phone: `(505) 555-5939`,
            OnPTO: false,
            ParentID: 18,
            Title: `Senior Accountant`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 50,
            HireDate: `2007, 11, 18`,
            ID: 7,
            Name: `Pedro Rodriguez`,
            Phone: `035-640230`,
            OnPTO: false,
            ParentID: 10,
            Title: `Senior Localization Developer`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 27,
            HireDate: `2016, 2, 19`,
            ID: 8,
            Name: `Casey Harper`,
            Phone: `0342-023176`,
            OnPTO: true,
            ParentID: 10,
            Title: `Senior Localization`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 25,
            HireDate: `2017, 11, 9`,
            ID: 15,
            Name: `Patricia Simpson`,
            Phone: `069-0245984`,
            OnPTO: false,
            ParentID: 7,
            Title: `Localization Intern`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 39,
            HireDate: `2010, 3, 22`,
            ID: 9,
            Name: `Francisco Chang`,
            Phone: `(91) 745 6200`,
            OnPTO: false,
            ParentID: 7,
            Title: `Localization Intern`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 25,
            HireDate: `2018, 3, 18`,
            ID: 16,
            Name: `Peter Lewis`,
            Phone: `069-0245984`,
            OnPTO: true,
            ParentID: 7,
            Title: `Localization Intern`
        }));
    }
}
tsコピー

import 'igniteui-webcomponents-grids/grids/combined';
import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";

export class Sample {

    constructor() {
        var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
        treeGrid.expansionDepth = 0;
        const rootData = [...this.employeesFlatData].filter(x => x.ParentID == -1);
        treeGrid.data = rootData;
        (treeGrid as any).loadChildrenOnDemand = (parentID: any, done: (children: any[]) => void) => {
            this.getData(parentID, (children) => done(children));
     };
    }

    public getData(parentID: any, done: (children: any[]) => void) {
        setTimeout(() => {
            const data = [...this.employeesFlatData];
            const children = data.filter((r) => r.ParentID === parentID);
            children.forEach((r) => r.hasEmployees = data.some((c) => c.ParentID === r.ID));
            done(children);
        }, 1000);
    }

    private _employeesFlatData: EmployeesFlatData = null;
    public get employeesFlatData(): EmployeesFlatData {
        if (this._employeesFlatData == null)
        {
            this._employeesFlatData = new EmployeesFlatData();
        }
        return this._employeesFlatData;
    }

}

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-tree-grid
        auto-generate="false"
        name="treeGrid"
        id="treeGrid"
        id="treeGrid"
        primary-key="ID"
        foreign-key="ParentID">
            <igc-column
            field="Name"
            data-type="string"
            sortable="true"
            editable="true"
            resizable="true">
            </igc-column>
            <igc-column
            field="Title"
            header="Job Title"
            data-type="string"
            sortable="true"
            editable="true"
            resizable="true">
            </igc-column>
            <igc-column
            field="Age"
            data-type="number"
            sortable="true"
            editable="true"
            resizable="true">
            </igc-column>
        </igc-tree-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コピー

Edit in: Codesandbox

용법

주문형 로드 기능은 기본 키와 외래 키 또는 하위 컬렉션의 두 가지 유형의 트리 그리드 데이터 원본과 호환됩니다. 트리 그리드에서 루트 수준 데이터를 로드하고 데이터 원본 유형 중 하나에 필요한 키를 지정하기만 하면 됩니다. 사용자가 행을 확장할 때 자식 행을 로드하기 위해 트리 그리드는 콜백 입력 속성을 loadChildrenOnDemand 제공합니다.

<igc-tree-grid id="treeGrid"></igc-tree-grid>
html

constructor() {
    var treeGrid = document.getElementById("treeGrid") as IgcTreeGridComponent;
    treeGrid.data = this.employeesFlatData;
    treeGrid.loadChildrenOnDemand = (parentID: any, done: (children: any[]) => void) => {
    this.getData(parentID, (children) => done(children));
    };
}
ts

LoadChildrenOnDemand 콜백은 두 개의 매개 변수를 제공합니다.

• parentID - 확장되는 상위 행의 ID입니다.
• done - 서버에서 자식을 검색할 때 자식과 함께 호출해야 하는 콜백입니다.

public loadChildren = (parentID: any, done: (children: any[]) => void) => {
    this.getData(parentID, (children) => done(children));
}
typescript

사용자가 확장 아이콘을 클릭하면 로드 표시기로 바뀝니다. done 콜백이 호출되면 로딩 표시기가 사라지고 자식이 로드됩니다. 트리 그리드는 기본 데이터 원본에 자식을 추가하고 필요한 키를 자동으로 채웁니다.

표시기 가시성 확장

확장 전에 행에 하위 항목이 있는지 여부에 대한 정보를 제공할 수 있는 방법이 있는 경우 hasChildrenKey 입력 속성을 사용할 수 있습니다. 이 방법으로 확장 표시기를 표시해야 하는지 여부를 나타내는 데이터 객체의 부울 속성을 제공할 수 있습니다.

<igc-tree-grid id="treeGrid" primary-key="ID" foreign-key="ParentID" has-children-key="hasEmployees"></igc-tree-grid>
html

속성을 설정할 hasChildrenKey 필요는 없습니다. 제공하지 않으면 각 행에 대해 확장 표시기가 표시됩니다. 자식이 없는 행을 확장한 후에도 undefined 또는 빈 배열로 done 콜백을 호출해야 합니다. 이 경우 로딩 표시기가 사라진 후에는 확장 표시기가 표시되지 않습니다.

사용자 정의 로딩 표시기

사용자 지정 로딩 표시기를 제공하려면 옵션을 rowLoadingIndicatorTemplate 사용하여 사용자 지정 템플릿을 설정할 수 있습니다. 다음 코드 조각은 설정하는 방법을 보여줍니다.

constructor() {
    var treeGrid = document.getElementById("treeGrid") as IgcTreeGridComponent;
    treeGrid.data = this.employeesFlatData;
    treeGrid.rowLoadingIndicatorTemplate = this.rowLoadingTemplate;
    treeGrid.loadChildrenOnDemand = (parentID: any, done: (children: any[]) => void) => {
               this.getData(parentID, (children) => done(children));
    };

}
public rowLoadingTemplate() {
    return html`<igc-icon name="loop" collection="material"></igc-icon>`;
}
ts

API 참조

• IgcTreeGridComponent

추가 리소스

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

• Ignite UI for Web Components 포럼
• ​GitHub Ignite UI for Web Components