概要

コンボ(GcComboBox)コントロールは、複数列(マルチカラム)のリスト表示機能やスピンボタンによる入力機能など、標準のコンボボックス(セレクトボックス)にはない豊富な機能を備えています。また、テキストエリアへの値の直接入力に対応しており、入力された値に合致する項目を自動的に表示するオートフィルタ機能なども提供しています。
import '@grapecity/inputman/CSS/gc.inputman-js.css'; import './styles.css'; import { InputMan } from '@grapecity/inputman'; import { products, gcProducts, orders } from './data'; const gcComboBox1 = new InputMan.GcComboBox(document.getElementById('gcComboBox1'), { items: products }); const gcComboBox2 = new InputMan.GcComboBox(document.getElementById('gcComboBox2'), { items: orders, columns: [ { name: 'id', label: '商品コード', width: 80, clickSort: true }, { name: 'product', label: '商品名', width: 200 }, { name: 'date', label: '受注日', width: 120, clickSort: true }, { name: 'price', label: '単価', width: 80, clickSort: true }, { name: 'amount', label: '数量', width: 80, clickSort: true }, ], displayMemberPath: 'product', valueMemberPath: 'product', dropDownWidth: 'auto' }); const gcComboBox3 = new InputMan.GcComboBox(document.getElementById('gcComboBox3'), { items: gcProducts, itemHeight: 50, displayMemberPath: 'name', valueMemberPath: 'name', itemTemplate: `<div class="template-item"> <div class="image"><img src="{!logo}"></div> <div class="names"><div class="name">{!name}</div><div class="category">{!category}</div></div> <div class="description">{!description}</div> </div>`, dropDownWidth: 'auto', generatingItem: (args) => { args.item.classList.add(args.index % 2 ? 'odd' : 'even'); } });
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>コンボコントロール - 概要</title> <!-- 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="flexbox"> <div> 単純なリスト<br> <select id="gcComboBox1"></select> </div> <div> 複数列<br> <select id="gcComboBox2"></select> </div> <div> テンプレート<br> <select id="gcComboBox3"></select> </div> </div> </body> </html>
body { min-height: 350px; } .viewport { line-height: 1.3; } .template-item { height: 50px; display: flex; justify-content: center; align-items: center; } .template-item > * { margin: 0 5px; } .image { width: 40px; height: 40px; } .image img { width: 40px; } .names { width: 150px; } .name { font-size: 16px; font-weight: bold; color: #2676c0; } .category { font-size: 12px; color: green; } .description { width: 210px; white-space: normal; } .list-item[selected="true"] .name, .list-item[selected="true"] .category { color: white; } .odd { background: aliceblue; }
export const products = ['果汁100%オレンジ', '果汁100%グレープ', '果汁100%レモン', '果汁100%ピーチ', 'コーヒーマイルド', 'コーヒービター']; export const orders = [ { id: 15, product: 'ピュアデミグラスソース', date: '2017/01/10', price: 200, amount: 30 }, { id: 17, product: 'だしこんぶ', date: '2017/01/08', price: 290, amount: 50 }, { id: 18, product: 'ピリカラタバスコ', date: '2017/01/12', price: 200, amount: 20 }, { id: 84, product: 'なまわさび', date: '2017/01/21', price: 200, amount: 40 }, { id: 85, product: 'なまからし', date: '2017/01/13', price: 200, amount: 40 }, { id: 86, product: 'なましょうが', date: '2017/01/20', price: 200, amount: 40 }, ]; export const gcProducts = [ { logo: 'img/AR.png', name: 'ActiveReports', category: '帳票・レポート', description: '日本仕様の帳票開発に必要な機能を搭載したコンポーネント' }, { logo: 'img/SP.png', name: 'SPREAD', category: '表計算・グリッド', description: 'Excel風のビューと表計算機能を実現するUIコンポーネント' }, { logo: 'img/C1.png', name: 'ComponentOne', category: 'コンポーネントセット', description: 'Visual Studioで利用する.NET Framework用コンポーネント' }, { logo: 'img/IM.png', name: 'InputMan', category: '入力支援', description: '快適な入力を実現する日本仕様入力コンポーネントセット' }, { logo: 'img/MR.png', name: 'MultiRow', category: '多段明細', description: '1レコード複数行&日付表示に最適なグリッドコンポーネント' }, { logo: 'img/DD.png', name: 'DioDocs', category: 'ドキュメントAPI', description: 'ドキュメントを生成、更新するAPIライブラリ' }, ];
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: { '@grapecity/inputman': 'npm:@grapecity/inputman/index.js', '@grapecity/inputman/CSS': 'npm:@grapecity/inputman/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' }, } });