요청 시 트리 그리드 로드

Ignite UI for Angular IgxTreeGrid 사용자가 가능한 한 빨리 볼 수 있도록 서버에서 가져오는 데 최소한의 데이터가 필요한 방식으로 렌더링될 수 있습니다. 그런 다음 사용자가 행을 확장한 후에만 해당 특정 상위 행의 하위 항목이 로드됩니다. 요청 시 로드라고도 하는 이 메커니즘은 모든 원격 데이터에 대해 작동하도록 쉽게 구성할 수 있습니다.

Angular Tree Grid Load On Demand Example

Usage

요청 시 로드 기능은 두 가지 유형의 트리 그리드 데이터 소스(primary and foreign keys 또는 child collection와 호환됩니다. 트리 그리드에 루트 수준 데이터를 로드하고 데이터 소스 유형 중 하나에 필요한 키를 지정하기만 하면 됩니다. 사용자가 행을 확장할 때 하위 행을 로드하기 위해 트리 그리드는 콜백 입력 속성 loadChildrenOnDemand 제공합니다.

<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID"
        [loadChildrenOnDemand]="loadChildren">
        ...
</igx-tree-grid>

loadChildrenOnDemand 콜백은 두 가지 매개변수를 제공합니다.

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

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

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

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

<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID"
        [loadChildrenOnDemand]="loadChildren" hasChildrenKey="hasEmployees">
        ...
</igx-tree-grid>

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

사용자 정의 로딩 표시기를 제공하려면 ng-template을 생성하고 igxRowLoadingIndicator 지시문으로 표시하면 됩니다. 다음 코드 조각은 이러한 사용자 정의 템플릿을 정의하는 방법을 보여줍니다.

<igx-tree-grid ...>

    ...

    <ng-template igxRowLoadingIndicator>
        <igx-icon fontSet="material">loop</igx-icon>
    </ng-template>
</igx-tree-grid>

API References

Additional Resources

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

요청 시 트리 그리드 로드

Angular Tree Grid Load On Demand Example

Usage

API References

Additional Resources

테마