Angular Tree Grid Pagination
페이지 매김은 많은 양의 데이터를 유사한 콘텐츠가 있는 일련의 페이지로 분할하는 데 사용됩니다. Angular 테이블 페이지 매김은 사용자 경험과 데이터 상호 작용을 개선합니다. 트리 그리드 페이지 매김은 열을 추가하는 것과 유사하게 igx-paginator 태그를 정의하여 그리드 트리에 투사된 별도의 구성 요소를 통해 구성할 수 있습니다. 모든 Angular 테이블에서와 마찬가지로 트리 그리드의 페이지 매김은 사용자 지정 페이지에 대한 템플릿을 지원합니다.
Angular Pagination Example
다음 예는 트리 그리드 페이지 매김을 나타내고 items per page의 옵션 사용법과 페이징을 활성화할 수 있는 방법을 보여줍니다. 사용자는 "마지막 페이지로 이동" 및 "첫 번째 페이지로 이동" 버튼을 통해 트리 그리드 페이지를 빠르게 탐색할 수도 있습니다.
igx-paginator 구성 요소를 추가하면 기능 존재 여부가 제어되며, 토글 속성과 함께 간단한 *ngIf 사용하여 기능을 활성화/비활성화할 수 있습니다. perPage 입력은 페이지당 표시되는 레코드를 제어합니다. 페이징을 활성화하도록 트리 그리드를 업데이트해 보겠습니다.
<igx-tree-grid #treeGrid [data]="data" [height]="'500px'" [width]="'100%'">
<igx-paginator [perPage]="10">
</igx-paginator>
</igx-tree-grid>
본보기:
<igx-paginator #paginator [totalRecords]="20">
<igx-paginator-content>
<div id="numberPager" style="justify-content: center;">
<button [disabled]="paginator.isFirstPage" (click)="paginator.previousPage()" igxButton="flat">
PREV
</button>
<span>
Page {{paginator.page}} of {{paginator.totalPages}}
</span>
<button [disabled]="paginator.isLastPage" (click)="paginator.nextPage()" igxButton="flat">
NEXT
</button>
</div>
</igx-paginator-content>
</igx-paginator>
Usage
igx-paginator 구성 요소는 아래 예에서 igx-tree-grid 구성 요소와 함께 사용되지만 페이징 기능이 필요한 경우 다른 구성 요소와 함께 사용할 수 있습니다.
<igx-tree-grid #treeGrid [data]="data">
<igx-paginator #paginator [(page)]="treeGrid.page" [totalRecords]="treeGrid.length" [(perPage)]="10"
[selectOptions]="selectOptions">
</igx-paginator>
</igx-tree-grid>
Paginator Component Demo
Remote Paging
원격 페이징은 데이터 가져오기를 담당하는 서비스와 그리드 구성 및 데이터 구독을 담당하는 구성 요소를 선언하여 수행할 수 있습니다. 자세한 내용은 Tree Grid Remote Data Operations 항목을 확인하세요.
스타일링
페이지네이터 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
가장 간단한 접근 방식에 따라 paginator-theme 확장하고 $text-color, $background-color 및 $border-color 매개변수를 허용하는 새로운 테마를 만듭니다.
$dark-paginator: paginator-theme(
$text-color: #d0ab23;,
$background-color: #231c2c,
$border-color: #d0ab23;
);
여기에서 볼 수 있듯이 페이징 컨테이너의 색상만 paginator-theme 제어하지만 호출기 UI의 버튼에는 영향을 주지 않습니다. 이러한 단추의 스타일을 지정하기 위해 새 아이콘 단추 테마를 만들어 보겠습니다.
$dark-button: icon-button-theme(
$foreground: #d0ab23,
$hover-foreground: #231c2c,
$hover-background: #d0ab23,
$focus-foreground: #231c2c,
$focus-background: #d0ab23,
$disabled-foreground: #9b7829
);
Note
우리가 방금 한 것처럼 색상 값을 하드 코딩하는 대신, and color 함수를 사용하여 palette 색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 지침은 항목을 참조하십시오 Palettes.
마지막 단계는 각각 해당 테마가 있는 구성 요소 믹스인을 포함하는 것입니다.
@include css-vars($dark-paginator);
.igx-grid-paginator__pager {
@include css-vars($dark-button);
}
Note
생성된 icon-button-theme를 내부에.igx-paginator__pager 포함시켜 paginator 버튼만 스타일이 지정되도록 합니다. 그렇지 않으면 그리드의 다른 아이콘 단추도 영향을 받습니다.
Note
구성 요소가 ViewEncapsulation을 Emulated 사용하는 경우 버튼과 같이 페이징 컨테이너 내부에 있는 구성 요소의 스타일을 지정하기 위해 이 캡슐화 using::ng-deep이 필요합니다 penetrate.
@include css-vars($dark-paginator);
:host {
igx-paginator {
::ng-deep {
@include css-vars($dark-button);
}
}
}
Demo
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub