このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。

Web Components ローカル データのバインディング

次のサンプルは、データの配列への Ignite UI for Web Components Data Table / Data Grid データ バインディングを示します。

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 DataGridBindingLocalData {

    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 DataGridBindingLocalData();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>DataGridBindingLocalData</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">
        <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ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

コード スニペット

public data: any[];
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.getCountryFlag(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;
    }
ts

API リファレンス

• IgcGridComponent