ListBox/ComboBox 그룹화

그룹화는 CollectionView 클래스에서 관리되지만, ComboBox 또는 ListBox와 같은 입력 컨트롤에 그룹을 표시하려면 컨트롤의 showGroups 속성을 true로 설정해야 합니다. 이렇게 하면 드롭다운에 그룹 헤더가 추가됩니다. 예제는 아래 샘플을 참조하십시오.

Input 컨트롤 알아보기 | ComboBox Grouping Documentation | ComboBox API Reference

import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import './styles.css'; // import * as input from '@mescius/wijmo.input'; import * as wijmo from '@mescius/wijmo'; import { getCountryCode, getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // get grouped CollectionView let data = getData(); // // toggle showGroups let showGroups = true; document.getElementById('showGroups').addEventListener('click', e => { showGroups = e.target.checked; theComboBox.showGroups = showGroups; theListBox.showGroups = showGroups; }); // // toggle formatItem let formatGroupHeaders = true; document.getElementById('formatGroupHeaders').addEventListener('click', e => { formatGroupHeaders = e.target.checked; data.refresh(); }); // // toggle checkboxes document.getElementById('showCheckboxes').addEventListener('click', e => { theListBox.checkedMemberPath = e.target.checked ? 'checked' : ''; }); // // show in ComboBox let theComboBox = new input.ComboBox('#theComboBox', { showGroups: true, formatItem: formatGroupHeader, displayMemberPath: 'city', itemsSource: data }); // // show in ListBox let theListBox = new input.ListBox('#theListBox', { showGroups: true, formatItem: formatGroupHeader, displayMemberPath: 'city', itemsSource: data }); // // show a flag in the group headers function formatGroupHeader(sender, e) { if (formatGroupHeaders && e.index < 0 && e.data instanceof wijmo.CollectionViewGroup) { let group = e.data, code = getCountryCode(group.name); // if (code) { e.item.innerHTML = `<span class="flag-icon flag-icon-${code}"></span> ${group.name}`; } } } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo ListBox/ComboBox Grouping</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <label> Show Groups <input id="showGroups" type="checkbox" checked> </label> <label> Format Group Headers <input id="formatGroupHeaders" type="checkbox" checked> </label> <label> Show Checkboxes <input id="showCheckboxes" type="checkbox"> </label> <div class="row"> <div class="col-xs-6"> <h4> ComboBox </h4> <div id="theComboBox"></div> </div> <div class="col-xs-6"> <h4> ListBox </h4> <div id="theListBox"></div> </div> </div> </div> </body> </html>
import * as wijmo from '@mescius/wijmo'; // some data for the list/combo export function getData() { var arr = []; // addCities(arr, 'US', ['New York', 'Los Angeles', 'Chicago', 'Houston']); addCities(arr, 'Japan', ['Tokyo', 'Osaka', 'Kyoto', 'Sendai']); addCities(arr, 'UK', ['London', 'Birmingham', 'Manchester', 'Liverpool']); addCities(arr, 'China', ['Shanghai', 'Beijing', 'Tianjin', 'Shenzhen']); addCities(arr, 'Germany', ['Berlin', 'Hamburg', 'Munich', 'Cologne']); addCities(arr, 'France', ['Paris', 'Marseille', 'Lyon', 'Toulouse']); addCities(arr, 'Canada', ['Toronto', 'Ottawa', 'Vancouver', 'Montreal']); addCities(arr, 'Russia', ['Moscow', 'St Petersburg', 'Novosibirsk', 'Yekaterinburg']); // return new wijmo.CollectionView(arr, { sortDescriptions: ['country', 'city'], groupDescriptions: ['country'], currentItem: null }); } // export function getCountryCode(country) { switch (country) { case 'US': return 'us'; case 'Japan': return 'jp'; case 'UK': return 'gb'; case 'China': return 'cn'; case 'Germany': return 'de'; case 'France': return 'fr'; case 'Canada': return 'ca'; case 'Russia': return 'ru'; } // return null; } // function addCities(arr, country, cities) { cities.forEach(city => { arr.push({ country: country, city: city }); }); }
@import 'https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/css/flag-icon.css'; .wj-listbox { height: 200px; display: block; } .wj-listbox .wj-listbox-item { line-height: 2em; } .wj-listbox .wj-listbox-item.wj-header { opacity: 1; position: sticky; top: 0; } label { margin: 0 24px; } body { margin-bottom: 40px; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);