Angular 그리드 기둥 유형

Ignite UI for Angular 기본 및 편집 템플릿의 모양에 따라 숫자, 문자열, 날짜, 부울, 통화 및 백분율 열 데이터 유형의 기본 처리를 제공합니다.

Angular Column Types Example

기본 템플릿

데이터 유형별 템플릿을 활성화하려면 dataType 열 입력을 설정해야 합니다. 그렇지 않으면 해당 열이 dataType 열의 기본값이므로 문자열 열로 처리됩니다. 각 유형의 기본 템플릿이 무엇인지 살펴보겠습니다.

String

이 열 dataType 셀 값의 모양이나 형식을 변경하지 않습니다.

Number

dataType이 number로 설정된 경우 셀 값의 형식은 pipeArgs 속성이 지정된 경우뿐 아니라 응용 프로그램이나 그리드의 locale 설정에 따라 지정됩니다. 그런 다음 숫자 형식은 이를 기반으로 변경됩니다. 예를 들어 다음이 변경될 수 있습니다.

소수점 이하 자릿수
, 또는 를 사용한 소수 구분 기호.

public options = {
  digitsInfo: '1.4-4',
};
public formatOptions = this.options;

<igx-column [pipeArgs]="formatOptions" [dataType]="'number'">
</igx-column>

DateTime, Date and Time

날짜 부분의 모양은 locale 형식이나 pipeArgs 입력에 따라 설정됩니다(예: 일, 월, 연도). 파이프 인수를 사용하여 사용자 정의 날짜 형식 이나 시간대를 지정할 수 있습니다.

형식- 날짜 형식 지정의 기본값은 'mediumDate'입니다. 사용 가능한 다른 옵션은 'short', 'long', 'shortDate', 'fullDate', 'longTime', 'fulLTime' 등입니다. 이것은 사용 가능한 모든 사전 정의된 형식 옵션의 전체 목록입니다.
timezone- 사용자의 로컬 시스템 시간대가 기본값입니다. 시간대 오프셋이나 표준 GMT/UTC 또는 미국 대륙 시간대 약어도 전달될 수 있습니다. 전 세계 어디에서나 해당 위치의 시간을 표시하는 다양한 시간대 예:

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;

<igx-column [pipeArgs]="formatDateOptions" [dataType]="'date'">
</igx-column>

사용 가능한 시간대:

시간대	값
알파 시간대	'UTC+1'
호주 중부 표준시	'UTC+9:30/ +10:30'
아라비아 표준시	'UTC+3'
중부 표준시	'UTC-6'
중국 표준시	'UTC+8'
델타 시간대	'UTC+4'
그리니치 표준시	'UTC+0'
걸프 표준시	'UTC+4'
하와이 표준시	'UTC-10'
인도 표준시	'UTC+4'

그리드는 Date 객체, 숫자(밀리초), ISO 날짜-시간 문자열 유형의 날짜 값을 허용합니다. 이 섹션에서는 사용자 정의 표시 형식을 구성하는 방법을 보여줍니다.

샘플에서 볼 수 있듯이 특정 열 유형에 사용 가능한 형식을 보여주기 위해 다양한 형식 옵션을 지정합니다. 예를 들어 아래에서는 날짜 개체의 시간 부분에 대한 형식 옵션을 찾을 수 있습니다.

// 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' },
];

셀 편집

열 유형을 기반으로 한 셀 편집의 경우 다른 편집기가 나타납니다.

dateTime -IgxDateTimeEditor 지시어가 사용됩니다. 이 편집기는 DateTime 개체의 입력 요소 부분에 대한 마스크 지침을 제공합니다.
날짜 -IgxDatePicker 구성 요소가 사용됩니다.
time -IgxTimePicker 구성 요소가 사용됩니다.

필터링

빠른 필터링/Excel 스타일 필터링의 경우 위에 나열된 동일한 편집기가 사용됩니다. 각 유형이 노출하는 필터링 피연산자는 다음과 같습니다.

날짜시간 및 날짜 - 같음, 같지 않음, 이전, 이후, 오늘, 어제, 이번 달, 지난 달, 다음 달, 올해, 작년, 내년, 비어 있음, 비어 있지 않음, Null, Null 아님;
시간 - 시점, 시점 아님, 이전, 이후, 시점 또는 이전, 시점 또는 이후, 비어 있음, 비어 있지 않음, Null, Null 아님;

요약

사용 가능한 요약 피연산자는 Count, Earliest (날짜/시간) 및 Late (날짜/시간)입니다.

정렬

시간 유형 열은 개체의 시간 부분을 기준으로 정렬되며 ms는 무시됩니다. 날짜 유형 열은 날짜 부분을 기준으로 정렬되며 시간 부분은 무시됩니다. DateTime 열은 전체 날짜를 기준으로 정렬됩니다.

Boolean

기본 템플릿은 부울 값 시각화를 위해 재료 아이콘을 사용합니다. 거짓 값은 '지우기' 아이콘, 참 값은 '확인' 아이콘입니다. 편집 템플릿은 igx-checkbox 컴포넌트를 사용하고 있습니다.

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

Currency

기본 템플릿

기본 템플릿에는 접두사 또는 접미사가 붙는 통화 기호와 함께 숫자 값이 표시됩니다. 통화 기호 위치와 숫자 값 형식은 모두 제공된 애플리케이션 LOCALE_ID 또는 그리드 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' }]
})

Grid의 로케일을 사용하여

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

pipeArgs 입력을 사용하여 최종 사용자는 소수점, 통화 코드 및 표시를 기준으로 숫자 형식을 사용자 정의할 수 있습니다.

public options = {
  digitsInfo: '3.4-4',
  currencyCode: 'USD',
  display: 'symbol-narrow'
};
public formatOptions = this.options;

<igx-column field="UnitsInStock"
    [pipeArgs]="formatOptions"
    [dataType]="'currency'">
</igx-column>

매개변수	설명
숫자정보	통화 가치의 10진수 표현을 나타냅니다.
통화 코드	ISO 4217 통화 코드
표시하다*	좁거나 넓은 기호로 값을 표시합니다.

*표시 - 기본 en-US 로케일의 경우 USD 코드는 좁은 기호 $ 또는 넓은 기호 US$로 표시될 수 있습니다.

셀 값을 편집하면 통화 기호가 접미사 또는 접두사로 표시됩니다. 이에 대한 자세한 내용은 공식 Cell 편집 주제에서 찾을 수 있습니다.

Note

위쪽/아래쪽 화살표 키를 사용하면 값은 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;

<igx-column field="UnitsInStock"
    [pipeArgs]="formatPercentOptions"
    [dataType]="'percent'">
</igx-column>

Note

위쪽/아래쪽 화살표 키를 사용하면 값은 digitsInfo - minFractionDigits(소수점 이하 최소 자릿수. 기본값은 0)에 따라 단계적으로 증가/감소합니다.

Image

기본 템플릿은 데이터에서 나오는 값을 기본 이미지 템플릿에 대한 이미지 소스로 사용합니다. 기본 이미지 템플릿은 이미지 파일의 이름을 추출하고 접근성 요구 사항을 충족하기 위해 이미지의 alt 속성으로 설정합니다. 표시된 셀 크기는 렌더링된 이미지의 크기에 따라 조정되므로 큰 이미지는 계속 렌더링되고 그리드 행은 이미지 열의 이미지만큼 커집니다. 이미지 유형 열에 대한 필터링, 정렬 및 그룹화는 기본적으로 해제됩니다. 이를 활성화하려면 데이터 작업을 수행하는 사용자 지정 전략을 제공해야 합니다.

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

열을 자동 생성 할 때 그리드는 첫 번째 데이터 레코드의 값을 분석합니다. 값이 문자열 유형이고 이미지 확장자(gif, jpg, jpeg, tiff, png, webp, bmp)로 끝나는 URL의 패턴과 일치하는 경우 열은 자동으로 dataType === GridColumnDataType.Image로 표시되고 기본 이미지 템플릿이 렌더링됩니다.

Default editing template

그리드 편집 항목의 편집 템플릿 부분을 참조하세요.

Custom editing template and formatter

사용자 정의 템플릿 및 열 포맷터 정의는 항상 열 데이터 유형 집합보다 우선합니다.

Custom template

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

Column formatter

 // 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;
}

API References

Additional Resources

사용자 정의 템플릿의 경우 셀 편집 항목을 볼 수 있습니다.
그리드 개요 항목
주제 편집
요약 주제

Angular 그리드 기둥 유형

Angular Column Types Example

기본 템플릿

String

Number

DateTime, Date and Time

셀 편집

필터링

요약

정렬

Boolean

Currency

기본 템플릿

Note

Percent

Note

Image

Default editing template

Custom editing template and formatter

Custom template

Column formatter

API References

Additional Resources

테마