이 컨트롤은 더 이상 사용되지 않고 그리드 구성 요소로 대체되었으므로 해당 컨트롤로 마이그레이션하는 것이 좋습니다. 새로운 기능은 제공되지 않으며 버그 수정은 우선순위에서 제외됩니다. 코드베이스를 Data Grid로 마이그레이션하는 데 도움이 필요하거나 질문이 있으면 지원팀에 문의하세요.

Web Components 그리드/테이블 페이지 매김

테이블 형식 테이블 UI는 많은 웹 제품에서 일반적으로 사용됩니다. 테이블 형식 테이블 UI를 처음부터 빌드하는 것은 쉽지 않지만 그리드를 Ignite UI for Web Components 테이블 UI를 만드는 것은 간단하며 많은 양의 로컬 또는 원격 데이터를 Web Components 그리드에 쉽게 바인딩할 수 있습니다. 그리드는 기본적으로 가상화되어 있으므로 큰 데이터 세트를 표시하기 위해 테이블 페이지 매김을 포함할 필요가 없습니다. UI에서 복잡한 데이터를 구성하는 가장 효율적인 방법 때문에 주로 사용됩니다. 테이블 페이지 매김을 사용하면 데이터를 설정된 행 수로 표시할 수 있으므로 사용자는 실제로 스크롤 막대 없이도 데이터를 "스크롤"할 수 있습니다. 테이블 페이지 매김을 위한 UI에는 일반적으로 다음과 같이 현재 페이지, 총 페이지, 클릭 가능한 이전 및 다음 화살표/버튼과 같이 사용자가 페이지를 넘길 수 있는 항목이 포함됩니다.

행 페이징은 Ignite UI for Web Components 데이터 테이블/데이터 그리드 내에서 다음을 설정하여 활성화됩니다. IsPagerVisible 재산. 또한 다음을 설정하여 표시되는 행의 최대 수를 제한할 수 있습니다. pageSize.

Web Components 행 페이징 예제

EXAMPLE

TS

HTML

CSS

import { IgcDataGridModule } from 'igniteui-webcomponents-grids';
import { IgcGridColumnOptionsModule } from 'igniteui-webcomponents-grids';
import { IgcDataGridComponent } from 'igniteui-webcomponents-grids';
import { IgcImageColumnComponent } from 'igniteui-webcomponents-grids';
import { IgcTextColumnComponent } from 'igniteui-webcomponents-grids';
import { IgcNumericColumnComponent } from 'igniteui-webcomponents-grids';
import { IgcDateTimeColumnComponent } from 'igniteui-webcomponents-grids';
import { IgcColumnGroupDescription } from 'igniteui-webcomponents-grids';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(
    IgcDataGridModule,
    IgcGridColumnOptionsModule
);

export class DataGridPager {

    private grid: IgcDataGridComponent;
    private data: any[] = [];

    constructor() {

        this.initData();

        this.grid = document.getElementById('grid') as IgcDataGridComponent;
        this.grid.dataSource = this.data;

        const grouping = new IgcColumnGroupDescription();
        grouping.field = 'Status';
        grouping.displayName = 'Status';
        this.grid.groupDescriptions.add(grouping);
    }

    public initData() {

        const names: string[] = [
            'Intel CPU', 'AMD CPU',
            'Intel Motherboard', 'AMD Motherboard', 'Nvidia Motherboard',
            'Nvidia GPU', 'Gigabyte GPU', 'Asus GPU', 'AMD GPU', 'MSI GPU',
            'Corsair Memory', 'Patriot Memory', 'Skill Memory',
            'Samsung HDD', 'WD HDD', 'Seagate HDD', 'Intel HDD', 'Asus HDD',
            'Samsung SSD', 'WD SSD', 'Seagate SSD', 'Intel SSD', 'Asus SSD',
            'Samsung Monitor', 'Asus Monitor', 'LG Monitor', 'HP Monitor' ];

        const countries: string[] = ['USA', 'UK', 'France', 'Canada', 'Poland',
            'Denmark', 'Croatia', 'Australia', 'Seychelles',
            'Sweden', 'Germany', 'Japan', 'Ireland',
            'Barbados', 'Jamaica', 'Cuba', 'Spain'];
        const status: string[] = [ 'Packing', 'Shipped', 'Delivered']
        const sales: any[] = [];

        for (let i = 0; i < 200; i++) {
            const price = this.getRandomNumber(10000, 90000) / 100;
            const items = this.getRandomNumber(4, 30);
            const value = Math.round(price * items);
            const margin = this.getRandomNumber(2, 5);
            const profit = Math.round((price * margin / 100) * items);
            const country = this.getRandomItem(countries);
            sales.push({
                Country: country,
                CountryFlag: this.getFlagImage(country),
                Margin: margin,
                OrderDate: this.getRandomDate(),
                OrderItems: items,
                OrderValue: value,
                ProductID: 1001 + i,
                ProductName: this.getRandomItem(names),
                ProductPrice: price,
                Profit: Math.round(profit),
                Status: this.getRandomItem(status),
            });
        }

        this.data = sales;
    }

    // gets path to image file with specified country name (without file extension)
    public getFlagImage(countryName: string): string {
        return 'https://static.infragistics.com/xplatform/images/flags/' + countryName + '.png';
    }

    // gets path to image file with specified gender type  (without file extension)
    public getGenderImage(gender: string): string {
        return 'https://static.infragistics.com/xplatform/images/genders/' + gender.toLowerCase() + '.png';
    }

    // gets path to image file with specified person ID (without file extension)
    public getPersonImage(personID: string): string {
        return 'https://static.infragistics.com/xplatform/people/' + personID + '.png';
    }

    public getRandomDate(): Date {
        const today: Date = new Date();
        const year: number = today.getFullYear();
        const month: number = this.getRandomNumber(0, 8);
        const day: number = this.getRandomNumber(10, 27);
        return new Date(year, month, day);
    }

    public getRandomNumber(min: number, max: number): number {
        return Math.round(min + Math.random() * (max - min));
    }

    public getRandomItem(array: any[]): any {
        const index = Math.round(this.getRandomNumber(0, array.length - 1));
        return array[index];
    }

    // public getCountryFlag(country: string): string {
    //     return require('./flags/' + country + '.png');
    // }
}

new DataGridPager();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>DataGridPager</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <igc-data-grid
    id="grid"
    height="100%"
    width="100%"
    auto-generate-columns="false"
    is-column-options-enabled="true"
    is-pager-visible="true"
    page-size="20">
        <igc-text-column field="ProductID" header-text="ID" width="*>95"></igc-text-column>
        <igc-text-column field="ProductName" header-text="Product" width="*>160"></igc-text-column>
        <igc-image-column field="CountryFlag" header-text="Country" width="*>120" contentOpacity="1"
                          padding-top="5" padding-bottom="5"></igc-image-column>
        <igc-numeric-column field="ProductPrice" header-text="Price" width="*>95" positive-prefix="$" show-grouping-separator="true" min-fraction-digits="2"></igc-numeric-column>
        <igc-numeric-column field="OrderItems" header-text="Orders" width="*>105"></igc-numeric-column>
        <igc-numeric-column field="OrderValue" header-text="Order Value" width="*>140" positive-prefix="$" show-grouping-separator="true"></igc-numeric-column>
        <igc-date-time-column field="OrderDate" header-text="Order Date" width="*>135" dateTimeFormat="DateShort" ></igc-date-time-column>
        <igc-numeric-column field="Margin" header-text="Margin" width="*>115" positive-suffix="%"></igc-numeric-column>
        <igc-numeric-column field="Profit" header-text="Profit" width="*>105" positive-prefix="$" show-grouping-separator="true"></igc-numeric-column>
        <igc-text-column field="Status" header-text="Status" width="*>100"></igc-text-column>
    </igc-data-grid>
</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

개요

UX 관점에서 볼 때 테이블 페이지 매김에는 장단점이 있습니다. UX Matters의 최근 기사에 따르면 다음은 테이블 페이지 매김과 관련하여 좋은 점과 나쁜 점을 분석한 것입니다.

테이블 페이지 매김의 이점:

• 사용자 선택을 제한합니다.
• 클릭수는 측정 가능합니다

테이블 페이지 매김 단점:

• 사용자는 여전히 스크롤해야 합니다.
• 호출기는 사이트마다 다르게 작동하고 동작합니다.
• UI 컨트롤이 너무 많으면 혼란스러울 수 있습니다.
• 사용자는 페이징과 느리고 번거로운 작업을 인식합니다.
• 사용자는 페이지 매김 컨트롤을 눈치채지 못할 수 있습니다.
• 페이지 로딩이 느릴 수 있습니다
• 사용자는 작업이 페이지에 적용되는지 아니면 전체 데이터 세트에 적용되는지 혼란스러워합니다.

Ignite UI Web Components 그리드를 사용하면 개발자가 페이징을 추가할 수 있지만 그리드에는 기본적으로 무한 스크롤이 내장되어 있으므로 그리드에 페이저를 추가하는 것보다 무한(또는 가상) 스크롤을 사용하는 것이 좋습니다. 가상화된 무한 스크롤을 기본 사용자 경험으로 사용하면 다음을 얻을 수 있습니다.

• 스크롤 상호작용을 통해 얼마나 많은 데이터가 '페이징'되는지 또는 제어할 수 있는 상태에서 최고의 성능을 발휘합니다.
• 모든 콘텐츠를 스크롤하는 자연스러운 접근 방식
• 모든 상호 작용은 최종 사용자에게 명확하게 전달됩니다.
• 모바일 UX의 자연스러운 상호작용에 매핑

Web Components 그리드/페이지 동기화

사용자가 정렬, 그룹화와 같이 그리드와 상호 작용하는 경우 그리드에서 Web Components 페이저를 활성화한 경우 다음 기능을 사용하여 Web Components 페이징 데이터가 Web Components 테이블 표시와 동기화되도록 해야 합니다.

• 적용정렬
• 적용그룹
• 적용필터

API 참조

• IgcGridComponent
• IsPagerVisible
• pageSize