Angular Grid 列タイプ

    Ignite UI for Angular Grid は、デフォルトおよび編集テンプレートの外観に基づいて、number (数値)、string (文字列)、date (日付)、boolean (ブール値)、currency (通貨) および percent (パーセント) 列のデータ型のデフォルト処理を提供します。

    Angular 列タイプの例

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    デフォルトのテンプレート

    データ型固有のテンプレートを有効にする場合、列の dataType 入力を設定する必要があります。設定しない場合、列は文字列の列として処理されます (これは列 dataType のデフォルト値であるためです)。次に各型のデフォルト テンプレートについて説明します。

    String (文字列)

    この列 dataType はセル値の外観または書式を変更しません。

    Number (数値)

    dataType が number に設定されている場合、セル値はアプリケーションまたはグリッドの locale 設定に基づいて書式設定され、pipeArgs プロパティが指定されている場合にも同じように設定されます。数値書式はそれらに基づいて変更されます。たとえば、以下を変更します:

    • 小数点後の桁数。
    • , または . の少数桁の区切り文字
    public options = {
  digitsInfo: '1.4-4',
};
public formatOptions = this.options;
ts
    <igx-column [pipeArgs]="formatOptions" [dataType]="'number'">
</igx-column>
html

    DateTime、Date と Time

    日付部分の外観は、locale の形式または pipeArgs 入力に基づいて設定されます (例: 日、月、年)。Pipe 引数はカスタム日付書式またはタイムゾーンを指定するために使用できます。

    • format - 日付の書式設定のデフォルト値は 'mediumDate' です。その他の利用可能なオプションは 'short'、'long'、'shortDate'、'fullDate'、'longTime'、'fullTime' などです。以下は利用可能なすべての定義済みの書式オプションの完全なリストです。
    • timezone - ユーザーのローカル システム タイムゾーンがデフォルト値です。タイムゾーン オフセットまたは標準の UTC/GMT または米国本土のタイムゾーンの略語も渡すことができます。世界の任意の場所の対応する時間を表示するさまざまなタイムゾーンの例:
    public formatDateOptions = {
    /** The date/time components that a date column will display, using predefined options or a custom format string. */
    /** e.g 'dd/mm/yyyy' or 'shortDate' **/
    format: 'longDate',
    /** A timezone offset (such as '+0430'), or a standard UTC/GMT or continental US timezone abbreviation. */
    timezone: 'GMT'
};
public formatOptions = this.options;
ts
    <igx-column [pipeArgs]="formatDateOptions" [dataType]="'date'">
</igx-column>
html

    利用可能なタイムゾーン:

    タイムゾーン 値
    Alpha Time Zone ‘UTC+1’
    Australian Central Time ‘UTC+9:30/ +10:30’
    Arabia Standard Time ‘UTC+3’
    Central Standard Time ‘UTC-6’
    China Standard Time ‘UTC+8’
    Delta Time Zone ‘UTC+4’
    Greenwich Mean Time ‘UTC+0’
    Gulf Standard Time ‘UTC+4’
    Hawaii Standard Time ‘UTC-10’
    India Standard Time ‘UTC+4’

    Grid は、Date オブジェクト、数値 (ミリ秒) または ISO 日付/時刻文字列の日付値を受け取ります。このセクションは、カスタム表示書式を構成する方法を示します。

    サンプルでは、特定の列タイプで使用可能な書式を紹介するために、さまざまな書式設定オプションを指定しています。たとえば、以下は日付オブジェクトの time 部分の書式設定オプションのサンプルです。

    // Time format with equivalent example
public timeFormats = [
    { format: 'shortTime', eq: 'h:mm a' },
    { format: 'mediumTime', eq: 'h:mm:ss a' },
    { format: 'longTime', eq: 'h:mm:ss a z' },
    { format: 'fullTime', eq: 'h:mm:ss a zzzz' },
];
ts

    セル編集

    列タイプに基づくセル編集に関しては、別のエディターが表示されます。

    フィルタリング

    クイック フィルタリング / Excel スタイル フィルタリングに関しては、上記と同じエディターが使用されます。これらは、各タイプが公開する次のフィルタリング オペランドです。

    • dateTime and date - Equals、Does Not Equal、Before、After、Today、Yesterday、This Month、Last Month、Next Month、This Year、Last Year、Next Year、Empty、Not Empty、Null、Not Null;
    • time - At、Not At、Before、After、At or Before、At or After、Empty、Not Empty、Null、Not Null;

    集計

    使用可能な集計オペランドは、Count、Earliest (date/time)、および Latest (date/time) になります。

    ソート

    Time タイプの列は、オブジェクトの時間部分に基づいてソートされます。分/秒は無視されます。Date タイプの列は、日付部分に基づいてソートされ、時間部分は無視されます。DateTime 列は、日付に基づいてソートされます。

    Boolean (ブール値)

    デフォルトのテンプレートは、ブール値の可視化にマテリアル アイコンを使用します。false 値には 'clear' アイコン、true 値には 'check' アイコンを使用します。編集テンプレートは igx-checkbox コンポーネントを使用しています。

    <igx-column [dataType]="'boolean'">
</igx-column>
html

    Currency (通貨)

    デフォルトのテンプレート

    デフォルトのテンプレートには、プレフィックスまたはサフィックスが付いた通貨記号を含む数値を表示します。通貨記号の位置と数値の書式設定は、提供された Application LOCALE_ID または Grid の locale に基づいています。

    LOCALE_ID を使用する場合

    import { LOCALE_ID } from '@angular/core';
...

 @Component({
    selector: 'app-component.sample',
    templateUrl: 'grid-component.sample.html',
    providers: [{provide: LOCALE_ID, useValue: 'fr-FR' }]
})
ts

    グリッドの locale を使用する場合

    <igx-grid [locale]="'fr-FR'" [data]="data">
</igx-grid>
html

    pipeArgs 入力を使用することにより、エンドユーザーは小数点、currencyCode および display によって数値書式をカスタマイズできます。

    public options = {
  digitsInfo: '3.4-4',
  currencyCode: 'USD',
  display: 'symbol-narrow'
};
public formatOptions = this.options;
ts
    <igx-column field="UnitsInStock"
    [pipeArgs]="formatOptions"
    [dataType]="'currency'">
</igx-column>
html
    パラメーター 説明
    digitsInfo 通貨値の 10 進数表現を表します
    currencyCode ISO 4217 通貨コード
    display* 省略記号または記号で値を表示します

    *display - デフォルトの en-US ロケールの場合、USD コードは省略記号 ($) または記号 (US$) で表すことができます。

    セルの値を編集すると、通貨記号がサフィックスまたはプレフィックスとして表示されます。詳細については、公式のセル編集トピックを参照してください。

    上/下矢印キーを使用する場合、値は digitsInfo-minFractionDigits (小数点以下の最小桁数。デフォルトは 0 です。) に基づいてステップで増減します。

    Percent (パーセント)

    デフォルトのテンプレートは、基になる数値に相当するパーセントを表示します。表示されるセル値は、'100' の表示ファクタで乗算された結果です。たとえば、デフォルトのファクタは 100 で、セルに渡される値は 0.123 であるため、表示されるセル値は 12.3% になります。

    セル編集の場合、値はデータ ソース値と同じになります。表示ファクタは '1' です。セルを編集すると、パーセント値のプレビューがサフィックス要素として表示されます。たとえば、'0.0547' の編集中にプレビュー要素に '5.47%' が表示されます。

    public options = {
    /**
    * Decimal representation options, specified by a string in the following format:
    * `{minIntegerDigits}`.`{minFractionDigits}`-`{maxFractionDigits}`.
    * `minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1.
    * `minFractionDigits`: The minimum number of digits after the decimal point. Default is 0.
    * `maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3.
    */
    digitsInfo: '2.2-3'
};
public formatPercentOptions = this.options;
ts
    <igx-column field="UnitsInStock"
    [pipeArgs]="formatPercentOptions"
    [dataType]="'percent'">
</igx-column>
html

    上/下矢印キーを使用する場合、値は digitsInfo-minFractionDigits (小数点以下の最小桁数。デフォルトは 0 です。) に基づいてステップで増減します。

    画像

    デフォルトのテンプレートは、デフォルの画像テンプレートへの画像ソースとしてデータからの値を使用しています。デフォルトの画像テンプレートは、画像ファイルの名前を抽出し、アクセシビリティ要件を満たすために画像の alt 属性として設定します。表示されるセル サイズは描画される画像のサイズに合わせて調整されるため、大きな画像も描画され、グリッド行は画像列の画像と同じ大きさになることに注意してください。画像タイプの列では、フィルタリング、ソート、およびグループ化はデフォルトでオフになっています。それらを有効にしたい場合は、データ操作を実行するカスタム ストラテジを提供する必要があります。

    <igx-column [dataType]="'image'">
</igx-column>
html

    列を自動生成する場合、グリッドは最初のデータ レコードの値を分析します。値が文字列型で、画像拡張子 (gif、jpg、jpeg、tiff、png、webp、bmp) で終わる URL のパターンと一致する場合、列は自動的に dataType === GridColumnDataType.Image としてマークされ、デフォルトの画像テンプレートが描画されます。

    デフォルトの編集テンプレート

    Grid 編集トピックの編集テンプレート部分を参照してください。

    カスタム編集テンプレートとフォーマッタ

    カスタム テンプレートと列フォーマッタの定義は、列データ型セットより常に優先されます。

    カスタム テンプレート

    <igx-grid #grid1 [data]="data | async" [autoGenerate]="false">
    <igx-column [field]="'UnitsInStock'" [dataType]="'currency'" [pipeArgs]="formatOptions" [editable]="true">
        <ng-template igxCellEditor let-value>
            {{ value | currency:'USD':'symbol':'1.0-0'}}
        </ng-template>
    </igx-column>
</igx-grid>
html

    列フォーマッタ

     // Through column formatter property
public formatCurrency(value: number) {
    return `Dollar sign ${value.toFixed(0)}`;
}

public init(column: IgxColumnComponent) {
    switch (column.field) {
        case 'UnitsInStock':
            column.formatter = this.formatCurrency;
            break;
        default:
            return;
}
ts
    App Builder | CTA Banner

    API リファレンス

    その他のリソース