Ignite UI for Angular 표에서 자동 생성된 열 작업Working with Auto-Generated columns in the Grid

Ignite UI for Angular 그리드는 사용 가능한 가장 빠른 데이터 그리드입니다. 응용 프로그램을 더 빠르게 실행하는 데 도움이 될 뿐만 아니라 개발자가 응용 프로그램을 더 빠르게 작성할 수 있습니다.

작동 방식을 보려면 아래 코드 목록에 표시된 것과 같은 데이터 소스가 있다고 가정합니다.

this.products = [
    { Id: '1', Title: 'Book', ExpiryDate: new Date(), Price: 35, Rating: 3.5 },
    { Id: '2', Title: 'Pen', ExpiryDate: new Date(), Price: 25, Rating: 4.0 },
    { Id: '3', Title: 'Pencil', ExpiryDate: new Date(), Price: 20, Rating: 3.2 },
    { Id: '4', Title: 'Bat', ExpiryDate: new Date(), Price: 135, Rating: 4.0 },
    { Id: '5', Title: 'Ball', ExpiryDate: new Date(), Price: 65, Rating: 3.8 },
];

구성 요소의 템플릿에서 igxGrid의 인스턴스를 정의하고 data 속성을 product 배열에 바인딩하기만 하면 igxGrid에서 위의 데이터를 렌더링할 수 있습니다. 아래 코드 목록에 표시된 대로 추가하는 것은 간단합니다.

<igx-grid [data]="products"
           [autoGenerate]="true"
           width="960px">
 </igx-grid>

data 및 autoGenerate 속성만 설정하면 아래와 같이 igxGrid에서 데이터를 렌더링해야 합니다.

autoGenerate 속성이 true로 설정되어 있으므로 Ignite UI 기본 속성이 구성된 열을 생성합니다. 그러나 Ignite UI for Angular Grid에는 다음과 같은 많은 기능이 있습니다.

• 필터링
• 페이징
• 정렬
• 열 고정
• 열 숨기기
• Column template
• 헤더, 템플릿 등 그리고 더 많은.

개발자는 비즈니스 요구 사항에 따라 이러한 기능을 구성할 수 있습니다. 다음 두 가지 방법으로 이 작업을 수행할 수 있습니다.

1. autoGenerate 속성을 false로 설정하고 열을 수동으로 구성합니다. 여기에서 자세히 알아보세요.
2. 열이 자동으로 생성되는 경우 구성 요소 클래스에서 런타임에 위의 기능을 구성합니다.

열이 초기화될 때 런타임에 필수 기능을 구성할 수 있습니다. Ignite UI for Angular igxGridComponent는 ColumInit에 대한 이벤트를 제공합니다.

열 초기화 시 onColumnInit 이벤트가 실행됩니다. 현재 실행하려는 모든 비즈니스 로직은 이 이벤트 내부에 작성해야 합니다. 예를 들어 아래 이미지와 같이 다양한 기능을 활성화하는 코드를 작성할 수 있습니다.

아래 코드 목록에 표시된 것처럼 component 클래스에서 이벤트를 처리할 수 있습니다.

특정 위치에 특정 열을 고정하려면 다음과 같이 할 수 있습니다

public onColumnInit(column: IgxColumnComponent) {
    if (column.field === 'Title') {
        column.pin();
    }
}

아래와 같이 왼쪽에 고정된 Title 열을 찾을 수 있습니다.

런타임에 hidden 속성 값을 true로 설정하여 초기화하는 동안 열을 숨길 수 있습니다.

public onColumnInit(column: IgxColumnComponent) {
    if (column.field === 'Id') {
        column.hidden = true;
    }
}

editable 속성을 true로 설정하여 열을 편집 가능하게 만들 수도 있습니다.

public onColumnInit(column: IgxColumnComponent) {
    if (column.field === 'ExpiryDate') {
        column.editable = true;
    }
}

igxGrid가 렌더링될 때 ExpiryDate 열은 아래 이미지와 같이 편집 가능해야 합니다. 또한 편집 모드에서 Ignite UI는 igxCalandar에서 날짜 유형 열을 편집할 수 있는 옵션을 제공합니다

보시다시피 자동 생성된 열에서 다양한 기능을 구성하는 것은 매우 쉽습니다.  기능을 구성하는 것 외에도 열 데이터를 지정된 출력으로 형식화할 수도 있습니다. Angular 에서는 파이프가 그렇게 합니다. 따라서 자동 생성 열의 경우 formatmatter 함수를 사용하여 파이프를 적용합니다.

당신이 원한다고 말합시다.

1. Display ExpiryDate in specific date format
2. 제목을 대문자로 표시

이를 위해 아래 이미지와 같이 onColumnInit 이벤트에서 포맷터 함수를 사용할 수 있습니다. 여기에서는 toLocaleDateString을 사용하여 날짜 출력을 로컬 날짜 형식으로 변환하고 toUpperCase를 사용하여 출력을 대문자로 표시합니다.

위의 포맷터를 적용하면 Title 열의 데이터가 대문자로 형식화되고 ExpiryDate 열의 데이터가 로컬 날짜 문자열 형식으로 형식화되어 있음을 알 수 있습니다.

복잡한 비즈니스 논리에도 포맷터를 사용할 수 있습니다. formatmatter 화살표 함수를 사용하여 여러 명령문을 논리로 전달할 수 있습니다. 예를 들어 가격 열의 경우 가격 데이터가 50 미만인 경우 가격 데이터 옆에 '할인됨' 텍스트를 추가해야 합니다. 아래 이미지와 같이 매우 빠르게 이 작업을 수행할 수 있습니다.

아래 이미지와 같이 적용된 포맷터로 렌더링된 Grid Ignite UI for Angular 얻을 수 있습니다.

앞에서 논의한 것처럼 열 데이터의 형식을 지정할 뿐만 아니라 다른 기능도 활용할 수 있습니다. 매우 원활하게 다음과 같은 다양한 다른 작업을 수행할 수 있습니다.

• Setting a summary
• 필터 설정
• 포맷터 설정
• Setting width
• Setting header value
• 헤더 템플릿 설정
• movable 속성 설정
• Setting hidden attributes etc.

위의 기능은 다른 블로그 게시물에서 개별적으로 다룰 것입니다. 그러나 이 블로그에 설명된 대로 Ignite UI for Angular Grid 열이 초기화될 때 기능을 구성하는 방법을 이해하는 것이 중요합니다. 여기에서 Ignite UI for Angular의 30일 평가판을 다운로드할 수 있습니다. 이 게시물이 도움이 되었기를 바랍니다.