페이지 매김은 많은 양의 데이터를 유사한 콘텐츠가 있는 일련의 페이지로 분할하는 데 사용됩니다. Angular 테이블 페이지 매김은 사용자 경험과 데이터 상호 작용을 개선합니다. 트리 그리드 페이지 매김은 열을 추가하는 것과 유사하게 igx-paginator
태그를 정의하여 그리드 트리에 투사된 별도의 구성 요소를 통해 구성할 수 있습니다. 모든 Angular 테이블에서와 마찬가지로 트리 그리드의 페이지 매김은 사용자 지정 페이지에 대한 템플릿을 지원합니다.
다음 예는 트리 그리드 페이지 매김을 나타내고 items per page
의 옵션 사용법과 페이징을 활성화할 수 있는 방법을 보여줍니다. 사용자는 "마지막 페이지로 이동" 및 "첫 번째 페이지로 이동" 버튼을 통해 트리 그리드 페이지를 빠르게 탐색할 수도 있습니다.
import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core' ;
import { IgxTreeGridComponent, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular' ;
import { ORDERS_DATA } from '../data/orders' ;
import { IgxPreventDocumentScrollDirective } from '../directives/prevent-scroll.directive' ;
import { NgIf } from '@angular/common' ;
@Component ({
encapsulation : ViewEncapsulation.None,
selector : 'app-tree-grid-paging-sample' ,
styleUrls : ['./tree-grid-paging-sample.component.scss' ],
templateUrl : 'tree-grid-paging-sample.component.html' ,
imports : [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, NgIf]
})
export class TreeGridPagingSampleComponent implements OnInit {
@ViewChild ('treegrid1' , { static : true }) public grid1: IgxTreeGridComponent;
public data: any [];
public options = {
digitsInfo : '1.2-2' ,
currencyCode : 'USD'
};
public formatOptions = this .options;
public ngOnInit(): void {
this .data = ORDERS_DATA;
}
}
ts コピー <div class ="grid__wrapper" >
<igx-tree-grid [igxPreventDocumentScroll ]="true" #treegrid1 [data ]="data" height ="500px" width ="100%"
primaryKey ="ID" foreignKey ="ParentID" >
<igx-paginator [perPage ]="10" > </igx-paginator >
<igx-column field ="ID" header ="Order ID" >
</igx-column >
<igx-column field ="Name" header ="Order Product" >
</igx-column >
<igx-column field ="Category" header ="Category" >
</igx-column >
<igx-column field ="Units" header ="Units" dataType ="number" >
</igx-column >
<igx-column field ="UnitPrice" header ="Unit Price" [dataType ]="'currency'" [pipeArgs ]="formatOptions" >
</igx-column >
<igx-column field ="Price" header ="Price" [dataType ]="'currency'" [pipeArgs ]="formatOptions" >
</igx-column >
<igx-column field ="OrderDate" header ="Order Date" [dataType ]="'date'" >
</igx-column >
<igx-column field ="Delivered" header ="Delivered" [dataType ]="'boolean'" >
<ng-template igxCell let-cell ="cell" let-val >
<img *ngIf ="val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/active.png" title ="Delivered" alt ="Delivered" />
<img *ngIf ="!val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/expired.png" title ="Undelivered" alt ="Undelivered" />
</ng-template >
</igx-column >
</igx-tree-grid >
</div >
html コピー @use '../../variables' as *;
$progressBar-sample-theme : progress-linear-theme(
$track-color : rgba(181 ,181 ,181 , .5 ),
$fill-color-default : orange
);
.grid__wrapper {
@include progress-linear($progressBar-sample-theme );
--ig-size: var(--ig-size-medium);
margin : 0 16px ;
padding-top : 10px ;
}
.cell__inner ,
.cell__inner_2 {
display : flex;
align-items : center;
height : 100% ;
}
.cell__inner {
position : relative;
justify-content : space-between;
}
.linear-bar-container {
width : 100% ;
}
scss コピー
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
igx-paginator
구성 요소를 추가하면 기능 존재 여부가 제어되며, 토글 속성과 함께 간단한 *ngIf
사용하여 기능을 활성화/비활성화할 수 있습니다. perPage
입력은 페이지당 표시되는 레코드를 제어합니다. 페이징을 활성화하도록 트리 그리드를 업데이트해 보겠습니다.
<igx-tree-grid #treeGrid [data ]="data" [height ]="'500px'" [width ]="'100%'" >
<igx-paginator [perPage ]="10" >
</igx-paginator >
</igx-tree-grid >
html
본보기:
<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 >
html
용법
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 >
html
페이지네이터 구성요소 데모
import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core' ;
import { IPaginatorResourceStrings, IgxPaginatorComponent, IgxTreeGridComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxSwitchComponent } from 'igniteui-angular' ;
import { ORDERS_DATA } from '../data/orders' ;
import { IgxPreventDocumentScrollDirective } from '../directives/prevent-scroll.directive' ;
import { NgIf } from '@angular/common' ;
import { FormsModule } from '@angular/forms' ;
@Component ({
selector : 'app-tree-grid-pager-sample' ,
styleUrls : ['./tree-grid-pager-sample.component.scss' ],
templateUrl : './tree-grid-pager-sample.component.html' ,
imports : [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxPaginatorContentDirective, NgIf, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxSwitchComponent, FormsModule]
})
export class TreeGridPagerSampleComponent implements OnInit , AfterViewInit {
@ViewChild ('paginator' , { read : IgxPaginatorComponent, static : false })
paginator : IgxPaginatorComponent;
public data: any [];
public densityOptions: string [];
public isDropdownHidden = false ;
public isPagerHidden = false ;
public selectOptions = [5 , 15 , 20 , 50 ];
public options = {
digitsInfo : '1.2-2' ,
currencyCode : 'USD'
};
public formatOptions = this .options;
private paginatorResourceStrings: IPaginatorResourceStrings = {
igx_paginator_label : 'Records per page'
};
public ngOnInit(): void {
this .data = ORDERS_DATA;
this .densityOptions = ['compact' , 'cosy' , 'comfortable' ];
}
public ngAfterViewInit(): void {
requestAnimationFrame(() => {
this .paginator.resourceStrings = this .paginatorResourceStrings;
});
}
}
ts コピー <div class ="grid__wrapper" >
<igx-tree-grid [igxPreventDocumentScroll ]="true" #treegrid1 [data ]="data" height ="500px" width ="100%" primaryKey ="ID" foreignKey ="ParentID" >
<igx-paginator #paginator [(page )]="treegrid1.page" [totalRecords ]="treegrid1.totalRecords"
[perPage ]="10" [selectOptions ]="selectOptions" >
<igx-paginator-content >
<igx-page-size *ngIf ="!isDropdownHidden" > </igx-page-size >
<igx-page-nav *ngIf ="!isPagerHidden" > </igx-page-nav >
</igx-paginator-content >
</igx-paginator >
<igx-column field ="ID" header ="Order ID" >
</igx-column >
<igx-column field ="Name" header ="Order Product" >
</igx-column >
<igx-column field ="Category" header ="Category" >
</igx-column >
<igx-column field ="Units" header ="Units" [dataType ]="'number'" >
</igx-column >
<igx-column field ="UnitPrice" header ="Unit Price" [dataType ]="'currency'" [pipeArgs ]="formatOptions" >
</igx-column >
<igx-column field ="Price" header ="Price" [dataType ]="'currency'" [pipeArgs ]="formatOptions" >
</igx-column >
<igx-column field ="OrderDate" header ="Order Date" [dataType ]="'date'" >
</igx-column >
<igx-column field ="Delivered" header ="Delivered" [dataType ]="'boolean'" >
<ng-template igxCell let-cell ="cell" let-val >
<img *ngIf ="val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/active.png" title ="Delivered" alt ="Delivered" />
<img *ngIf ="!val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/expired.png" title ="Undelivered" alt ="Undelivered" />
</ng-template >
</igx-column >
</igx-tree-grid >
<div class ="options-container" >
<igx-switch [(ngModel )]="isDropdownHidden" > Hide Dropdown</igx-switch >
<igx-switch [(ngModel )]="isPagerHidden" > Hide Pager</igx-switch >
</div >
</div >
html コピー .grid__wrapper {
--ig-size: var(--ig-size-medium);
margin : 0 16px ;
padding-top : 10px ;
}
igx-switch {
margin : 24px ;
}
.options-container {
display : flex;
flex-direction : row;
align-items : center;
padding : 0 1rem ;
}
.options_container * { margin-right : 15px ; }
.select-input {
max-width : 150px ;
padding-top : 5px ;
padding-bottom : 5px ;
margin-left : 15px ;
}
scss コピー
원격 페이징
원격 페이징은 데이터 가져오기를 담당하는 서비스와 그리드 구성 및 데이터 구독을 담당하는 구성 요소를 선언하여 수행할 수 있습니다. 자세한 내용은 Tree Grid Remote Data Operations
항목을 확인하세요.
스타일링
페이지네이터 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index
파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
scss
가장 간단한 접근 방식에 따라 paginator-theme
확장하고 $text-color
, $background-color
및 $border-color
매개변수를 허용하는 새로운 테마를 만듭니다.
$dark-paginator : paginator-theme(
$text-color : #d0ab23 ;,
$background-color : #231c2c ,
$border-color : #d0ab23 ;
);
scss
여기에서 볼 수 있듯이 페이징 컨테이너의 색상만 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
);
scss
우리가 방금 한 것처럼 색상 값을 하드 코딩하는 대신, and color
함수를 사용하여 palette
색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 지침은 항목을 참조하십시오 Palettes
.
마지막 단계는 각각 해당 테마가 있는 구성 요소 믹스인을 포함하는 것입니다.
@include css-vars($dark-paginator );
.igx-grid-paginator__pager {
@include css-vars($dark-button );
}
scss
생성된 icon-button-theme 를 내부에.igx-paginator__pager
포함시켜 paginator 버튼만 스타일이 지정되도록 합니다. 그렇지 않으면 그리드의 다른 아이콘 단추도 영향을 받습니다.
구성 요소가 ViewEncapsulation을 Emulated
사용하는 경우 버튼과 같이 페이징 컨테이너 내부에 있는 구성 요소의 스타일을 지정하기 위해 이 캡슐화 using::ng-deep
이 필요합니다 penetrate
.
@include css-vars($dark-paginator );
:host {
igx-paginator {
::ng-deep {
@include css-vars($dark-button );
}
}
}
scss
데모
import { Component, OnInit } from '@angular/core' ;
import { ORDERS_DATA } from '../data/orders' ;
import { IgxTreeGridComponent, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular' ;
import { IgxPreventDocumentScrollDirective } from '../directives/prevent-scroll.directive' ;
import { NgIf } from '@angular/common' ;
@Component ({
selector : 'app-tree-grid-paging-sample' ,
styleUrls : ['./tree-grid-paging-style-sample.component.scss' ],
templateUrl : 'tree-grid-paging-style-sample.component.html' ,
imports : [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, NgIf]
})
export class TreeGridPagingStyleSampleComponent implements OnInit {
public data: any [];
public options = {
digitsInfo : '1.2-2' ,
currencyCode : 'USD'
};
public formatOptions = this .options;
public ngOnInit(): void {
this .data = ORDERS_DATA;
}
}
ts コピー <div class ="grid__wrapper" >
<igx-tree-grid [igxPreventDocumentScroll ]="true" #treegrid1 [data ]="data" height ="520px" width ="100%"
primaryKey ="ID" foreignKey ="ParentID" >
<igx-paginator [perPage ]="10" > </igx-paginator >
<igx-column field ="ID" header ="Order ID" >
</igx-column >
<igx-column field ="Name" header ="Order Product" >
</igx-column >
<igx-column field ="Category" header ="Category" >
</igx-column >
<igx-column field ="Units" header ="Units" dataType ="number" >
</igx-column >
<igx-column field ="UnitPrice" header ="Unit Price" [dataType ]="'currency'" [pipeArgs ]="formatOptions" >
</igx-column >
<igx-column field ="Price" header ="Price" [dataType ]="'currency'" [pipeArgs ]="formatOptions" >
</igx-column >
<igx-column field ="OrderDate" header ="Order Date" [dataType ]="'date'" >
</igx-column >
<igx-column field ="Delivered" header ="Delivered" [dataType ]="'boolean'" >
<ng-template igxCell let-cell ="cell" let-val >
<img *ngIf ="val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/active.png" title ="Delivered" alt ="CDelivered" />
<img *ngIf ="!val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/expired.png" title ="Undelivered" alt ="Undelivered" />
</ng-template >
</igx-column >
</igx-tree-grid >
</div >
html コピー @use "layout.scss" ;
@use "igniteui-angular/theming" as *;
$my-primary : #231c2c ;
$my-secondary : #d0ab23 ;
$dark-gray : #333 ;
$light-gray : #999 ;
$inactive-color : #9b7829 ;
$dark-paginator : paginator-theme(
$text-color : $my-secondary ,
$background-color : $my-primary ,
$border-color : $my-secondary
);
$dark-button : icon-button-theme(
$foreground : $my-secondary ,
$hover-foreground : $dark-gray ,
$hover-background : $my-secondary ,
$focus-foreground : $dark-gray ,
$focus-background : $my-secondary ,
$border-color : $my-secondary ,
$focus-border-color : $my-secondary ,
$disabled-foreground : $inactive-color
);
$dark-select : select-theme(
$toggle-button-background : $my-primary ,
$toggle-button-foreground : $inactive-color ,
$toggle-button-foreground-filled : $inactive-color ,
$toggle-button-foreground-focus : $inactive-color ,
$toggle-button-background-focus--border : $my-primary ,
);
$dark-input-group : input-group-theme(
$filled-text-color : $my-secondary ,
$idle-text-color : $my-secondary ,
$filled-text-hover-color : $my-secondary ,
$focused-text-color : $my-secondary ,
$border-color : darken($inactive-color , 10% ),
$focused-border-color : $my-secondary ,
$input-suffix-color : $my-secondary ,
);
$dark-drop-down-theme : drop-down-theme(
$background-color : $my-primary ,
$item-text-color : $my-secondary ,
$selected-item-background : $my-secondary ,
$selected-item-text-color : $dark-gray ,
$focused-item-background : $my-secondary ,
$focused-item-text-color : $dark-gray ,
$selected-focus-item-background : $my-secondary ,
$selected-focus-item-text-color : $dark-gray ,
$selected-hover-item-background : $my-secondary ,
$selected-hover-item-text-color : $dark-gray
);
@include css-vars($dark-paginator );
:host {
::ng-deep {
@include css-vars($dark-drop-down-theme );
igx-paginator {
@include css-vars($dark-button );
@include css-vars($dark-input-group );
@include css-vars($dark-select );
}
}
}
scss コピー
API 참조
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.