Tree Grid 페이징

    Ignite UI for Angular Tree Grid에서 Paging은 루트 igx-tree-grid 컴포넌트에서 초기화되며 paging 및 perPage 입력으로 설정할 수 있습니다.

    데모

    페이징은 해당 기능이 사용되는지 여부를 제어하는 불 속성이며 perPage 속성은 페이지당 표시할 수 있는 레코드를 제어합니다. 페이징을 활성화하기 위해 Tree Grid를 업데이트합니다:

    <igx-tree-grid #treeGrid [data]="data" [height]="'500px'" [width]="'100%'" [displayDensity]="'cosy'">
    <igx-paginator [perPage]="10">
    </igx-paginator>
</igx-tree-grid>

    페이징 영역은 초기화 중에 템플릿 참조가 Tree Grid에 전달되는 경우 사용자가 템플릿화를 할 수 있습니다. 아래 예제는 페이징이 입력을 통해 제어되는 템플릿입니다.

    <igx-tree-grid #treeGrid [data]="data" [height]="'500px'" [width]="'100%'" [displayDensity]="'cosy'">
    <igx-paginator [perPage]="10">
    </igx-paginator>
</igx-tree-grid>

    페이징은 paginate, previousPage, nextPage 메소드를 사용하여 Tree Grid API를 통해 프로그래밍 방식으로 실행할 수도 있습니다:

    // Go to page 6
this.treeGrid.paginate(5);

// Go to previous/next page
this.treeGrid.previousPage();
this.treeGrid.nextPage();

// Check for first/last page
this.treeGrid.isFirstPage;
this.treeGrid.isLastPage;

// Get the number of pages
this.treeGrid.totalPages;

// Change the number of records per page
this.treeGrid.perPage = 25;

// Enables/disables paging
this.treeGrid.paging = false;

    API 참조

    추가 리소스

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