드롭다운 컨트롤 내부에 정보를 표시할 때, 매우 긴 드롭다운 목록 하나를 표시하는 대신 더 많은 양의 정보를 한 번에 표시하려는 경우가 있습니다. Wijmo의 ComboBox 컨트롤을 사용하면 이 작업을 쉽고 간단하게 수행할 수 있을 뿐만 아니라 드롭다운 컨트롤에서 사용할 수 있는 여러 레이아웃을 제공할 수 있습니다.

이 블로그에서는 Wijmo의 ComboBox 컨트롤, CSS 스타일, ComboBox의 헤더 경로 및 속성을 사용하여 다중 열 드롭다운을 생성하는 단계를 간략히 설명하겠습니다.

Wijmo는 가장 빠르고 가장 유연한 JavaScript DataGrid와 함께 정렬, 그룹화, 검색, Excel과 유사한 필터링, DataMaps, 사용자 정의 CellTemplates, 스파크라인, 풍부한 편집, Excel/PDF 내보내기, 유효성 검사, DetailsRows 등의 기능을 제공합니다.

필수 모듈을 가져오는 방법

MultiColumn ComboBox를 생성하려면 먼저 JavaScript 파일에 필수 Wijmo 모듈을 가져와야 합니다.

(자바스크립트 SystemJS 모튤 기반으로 작성되었습니다.)

import ‘@grapecity/wijmo.styles/wijmo.css’;
import * as wijmo from ‘@grapecity/wijmo’;
import * as input from ‘@grapecity/wijmo.input’;
import { getData } from ‘./data’;

ComboBox 스타일을 지정하는 데 사용될 Wijmo의 CSS 파일, Wijmo의 핵심 및 입력 JavaScript 파일, 그리고 데이터를 검색하는 데 사용될 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와 동일하게 설정됩니다.

let theComboCSS = new input.ComboBox(‘#theComboCSS’, {
dropDownCSSClass: ‘cb-flex’,
displayMemberPath: ‘country’,
itemsSource: getData()
});

여기서는 드롭다운에서 사용할 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에 대해 살펴볼 두 번째 서식 스타일은 테이블 스타일 서식입니다. 테이블 스타일을 사용하면 드롭다운에 전체 데이터 개체를 테이블 레이아웃으로 표시할 수 있습니다.

먼저 드롭다운 형식을 지정하는 데 사용할 HTML을 저장할 템플릿 변수를 만듭니다.

let template = ‘<table><tr>’ +
‘<td>{country}</td>’ +
‘<td class=’number’>{gdpm:c0}</td>’ +
‘<td class=’number’>{popk:n0}</td>’ +
‘<td class=’number’>{gdpcap:c0}</td>’ +
‘</tr></table>’;

그러면 ComboBox가 드롭다운에 사용할 템플릿 레이아웃과 드롭다운에 표시할 숫자 값의 형식이 생성됩니다.

다음으로, ComboBox 개체를 생성하고 템플릿을 사용하여 ComboBox의 FormatItem 속성을 사용하여 드롭다운을 사용자 정의해 보겠습니다.

let theComboTable = new input.ComboBox(‘#theComboTable’, {
headerPath: ‘country’,
displayMemberPath: ‘country’,
formatItem: (sender, e) => {
e.item.innerHTML = wijmo.format(template, e.data);  
},
itemsSource: getData()
});

이제 Wijmo의 wijmo.format 메서드와 템플릿 및 현재 데이터 항목을 함께 사용하여 드롭다운에 있는 각 셀에 대한 innerHTML 값을 설정하겠습니다.

마지막으로 약간의 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개의 열에 표시합니다.

여기에서 두 샘플을 실시간으로 확인하실 수 있습니다.