요청 시 트리 그리드 로드

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

Web Components Tree Grid Load On Demand Example

Usage

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

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

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

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

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

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

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

Expanding Indicator Visibility

행이 확장되기 전에 자식이 있는지 정보를 제공할 수 있는 방법이 있다면, 입력 속성을 사용할hasChildrenKey 수 있습니다. 이렇게 하면 데이터 객체에서 불리언 속성을 제공해 확장 표시기를 표시할지 알 수 있습니다.

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

속성 설정hasChildrenKey이 필수는 아니라는 점에 유의하세요. 만약 제공하지 않으면, 각 행마다 확장 표시가 표시됩니다. 자식이 없는 행을 확장한 후에도, 여전히 undefined 또는 empty 배열로 완료된 콜백을 호출해야 합니다. 이 경우 로딩 표시기가 사라지면 확장 표시기가 나타나지 않습니다.

Custom Loading Indicator

자신만의 맞춤 로딩 표시기를 제공하고 싶다면, 맞춤 템플릿 설정 옵션을 사용할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>`;
}

API References

IgcTreeGridComponent

Additional Resources

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