Input Angular에서 MultiColumn ComboBox 생성하기
페이지 정보
작성자 GrapeCity 작성일 2021-04-06 14:21 조회 905회 댓글 0건본문
관련링크
이 블로그에서는 Wijmo의 ComboBox 컨트롤, CSS 스타일, ComboBox의 헤더 경로 및 속성을 사용하여 다중 열 드롭다운을 생성하는 단계를 간략히 설명하겠습니다.
Wijmo는 와 함께 , , , , , , , , /, , 등의 기능을 제공합니다.
필수 모듈을 가져오는 방법
MultiColumn ComboBox를 생성하려면 먼저 JavaScript 파일에 필수 Wijmo 모듈을 가져와야 합니다.
import ‘@grapecity/wijmo.styles/wijmo.css’; import * as wijmo from ‘@grapecity/wijmo’; import * as input from ‘@grapecity/wijmo.input’: import { WjInputModule } from ‘@grapecity/wijmo.angular2.input’; import { DataService } from ‘./app.data’;
ComboBox 스타일을 지정하는 데 사용될 Wijmo의 CSS 파일, Wijmo의 핵심 및 입력 TypeScript 파일, Wijmo의 입력 모듈, 그리고 데이터를 검색하는 데 사용될 getData() 메서드를 통해 데이터를 얻을 수 있는 데이터 서비스를 가져옵니다.
getData() 메서드에서 검색된 데이터는 다음과 같은 여러 속성을 가진 개체 목록을 반환합니다.
{ id: 1, country: ‘Luxembourg’, gdmp: 57825, … } { id: 2, country: ‘Switzerland’, gdmp: 664005, … } { id: 3, country: ‘Norway’, gdmp: 388315, … } ...
3단 ComboBox 만들기
지금부터 알아볼 MultiColumn ComboBox의 첫 번째 스타일은 3단 ComboBox입니다. 이 스타일은 일반 Wijmo ComboBox와 동일하게 설정됩니다.
<wj-combo-box [dropDownCssClass]=”’cb-flex’” [displayMemberPath]=”’country’” [itemsSource]=”data”></wj-combo-box>
여기서는 드롭다운에서 사용할 CSS 클래스, 표시할 개체의 속성, 그리고 getData() 메서드에 의해 전달되는 항목 소스를 설정합니다.
이제 드롭다운에서 사용할 CSS 클래스를 만들어 단일 데이터 열이 아닌 세 개의 열에 데이터를 표시합니다.
.cb-flex { display: flex; flex-wrap: wrap; width: 380px; } .cb-flex .wj-listbox-item { width: 120px; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
그러면 ComboBox의 너비가 세 열을 수용할 수 있도록 확장될 뿐만 아니라 드롭다운에서 반올림할 열을 설정할 수 있습니다. 최종 결과는 다음과 같습니다.
이처럼 ComboBox의 드롭다운에는 깔끔한 데이터 열에 데이터가 표시됩니다.
테이블 ComboBox 만들기
Wijmo의 ComboBox에 대해 두 번째로 살펴볼 스타일은 테이블 스타일 서식입니다. 테이블 스타일을 사용하면 드롭다운에 전체 데이터 개체를 테이블 레이아웃으로 표시할 수 있습니다.
다시 한번 ComboBox를 만들겠지만, 내부에서는 ng-template 요소를 사용하여 ComboBox 내에 테이블을 만들고, 이것을 사용하여 모든 데이터를 테이블 형식으로 표시합니다.
<wj-combo-box [headerPath]=”’country’” [displayMemberPath]=”’country’” [itemsSource]=”’data’”> <ng-template wjItemTemplate let-item=”item” let-itemIndex=”itemIndex”> <table> <tr> <td>{{ item.country }}</td> <td class=”number”>{{ format(‘{gdpm:c0}’, item) }}</td> <td class=”number”>{{ format(‘{popk:n0}’, item) }}</td> <td class=”number”>{{ format(‘{gdpcap:c0}’, item }}</td> </tr> </table> </ng-template> </wj-combo-box>
그러면 ComboBox가 드롭다운에 사용할 템플릿 레이아웃을 생성하고, 형식 메서드를 사용하여 드롭다운에 표시할 숫자 값 형식을 지정합니다. 이제 이 값을 app.component.ts 파일 내부에 생성합니다.
format(text: string, data: any) { return wijmo.format(text, data); }
마지막으로 약간의 CSS를 추가하여 테이블의 레이아웃을 개선합니다.
.wj-listbox-item table { table-layout: fixed; } .wj-listbox-item td { width: 120px; white-space: pre; overflow: hidden; text-overflow: ellipsis; } .wj-listbox-item td.number { width: 80px; text-align: right;
테이블 ComboBox의 최종 출력은 다음과 같습니다.
보시다시피, 이제 ComboBox 드롭다운에 있는 각 데이터 개체 전체를 깔끔한 4개의 열에 표시합니다.
두 샘플을 실시간으로 확인하실 수 있습니다.
댓글목록
등록된 댓글이 없습니다.