グループ化

グループ化はCollectionViewクラスによって管理されますが、ComboBoxListBoxのような入力コントロールでグループの表示を有効にするには、コントロールのshowGroupsプロパティをtrueに設定する必要があります。これにより、ドロップダウンにグループヘッダーが追加されます。実行例は下記のサンプルを参照してください。

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as input from '@grapecity/wijmo.input'; import * as wijmo from '@grapecity/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>GrapeCity ListBox/ComboBox Grouping</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <label> グループを表示 <input id="showGroups" type="checkbox" checked="checked"> </label> <label> グループヘッダーをカスタマイズ <input id="formatGroupHeaders" type="checkbox" checked="checked"> </label> <label> チェックボックスを表示 <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 '@grapecity/wijmo'; // some data for the list/combo export function getData() { var arr = []; // addCities(arr, 'アメリカ', ['ニューヨーク', 'ロサンゼルス', 'シカゴ', 'ヒューストン']); addCities(arr, '日本', ['東京', '大阪', '京都', '仙台']); addCities(arr, 'イギリス', ['ロンドン', 'バーミンガム', 'マンチェスター', 'リバプール']); addCities(arr, '中国', ['上海', '北京', '天津', '深圳']); addCities(arr, 'ドイツ', ['ベルリン', 'ハンブルク', 'ミュンヘン', 'ケルン']); addCities(arr, 'フランス', ['パリ', 'マルセイユ', 'リヨン', 'トゥールーズ']); addCities(arr, 'カナダ', ['トロント', 'オタワ', 'バンクーバー', 'モントリオール']); addCities(arr, 'ロシア', ['モスクワ', 'サンクトペテルブルク', 'ノボシビルスク', 'エカテリンブルク']); // return new wijmo.CollectionView(arr, { sortDescriptions: ['country', 'city'], groupDescriptions: ['country'], currentItem: null }); } // export function getCountryCode(country) { switch (country) { case 'アメリカ': return 'us'; case '日本': return 'jp'; case 'イギリス': return 'gb'; case '中国': return 'cn'; case 'ドイツ': return 'de'; case 'フランス': return 'fr'; case 'カナダ': return 'ca'; case 'ロシア': 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', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/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);