GcComboBox型セル

GcComboBox型セルは、複数列(マルチカラム)やテンプレートによるリスト表示機能、スピンボタンによる入力機能など豊富な機能を備えています。また、テキストエリアへの値の直接入力に対応しており、入力された値に合致する項目を自動的に表示するオートフィルタ機能なども提供しています。

GcComboBox型セルを作成するには、次の例のようなコードを使用します。 GcComboBox型セルの主なオプションは以下の通りです。オプションの完全なリストと機能の詳細については、InputManJSの製品ヘルプやデモアプリケーションを参照してください。 items: ドロップダウンのデータソースを設定します。 columns: ドロップダウンを複数列で表示する場合に、各列の設定を定義します。 displayMemberPath: ドロップダウンに表示するメンバーを指定します。 valueMemberPath: ドロップダウンのアイテムから値として参照するメンバーを指定します。 isEditable: コンボボックスに入力できるかどうかを設定します。 autoFilter: コンボボックスのフィルタリング方法を指定します。 dropDownHeight: ドロップダウンの高さを設定します。 dropDownWidth: ドロップダウンの幅を設定します。 itemHeight: ドロップダウンのアイテムの高さを設定します。 showSpinButton: スピンボタンを表示するかどうかを設定します。 watermarkNullText: 未入力のときの代替テキストを設定します。
const autoFilters = [ GC.InputMan.AutoFilter.Contains, GC.InputMan.AutoFilter.StartWith, GC.InputMan.AutoFilter.None ]; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss')); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.setColumnWidth(0, 150); sheet.setColumnWidth(1, 200); sheet.setValue(0, 0, 'シンプルなリスト:'); sheet.setValue(2, 0, '複数列のリスト:'); sheet.setValue(4, 0, 'テンプレート:'); sheet.setValue(6, 0, 'カスタムリスト:'); refresh(sheet); var forms = 'isEditable,autoFilter,showSpinButton'.split(','); for (var i = 0; i < forms.length; i++) { document.getElementById(forms[i]).addEventListener('change', function() { refresh(sheet); }); } }; function refresh(sheet) { var gcComboBoxCellType1 = new GC.Spread.Sheets.CellTypes.GcComboBoxCellType({ items: products, dropDownWidth: 'auto', isEditable: document.getElementById('isEditable').checked, autoFilter: autoFilters[document.getElementById('autoFilter').selectedIndex], showSpinButton: document.getElementById('showSpinButton').checked, emptyTemplate: `<div style="height:130px">該当する項目がありません</div>` }); sheet.setCellType(0, 1, gcComboBoxCellType1); var gcComboBoxCellType2 = new GC.Spread.Sheets.CellTypes.GcComboBoxCellType({ 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', isEditable: document.getElementById('isEditable').checked, autoFilter: autoFilters[document.getElementById('autoFilter').selectedIndex], showSpinButton: document.getElementById('showSpinButton').checked, emptyTemplate: `<div style="height:130px">該当する項目がありません</div>` }); sheet.setCellType(2, 1, gcComboBoxCellType2); var gcComboBoxCellType3 = new GC.Spread.Sheets.CellTypes.GcComboBoxCellType({ items: employees, itemHeight: 42, displayMemberPath: 'name', valueMemberPath: 'name', dropDownWidth: 290, itemTemplate: `<div class="template-item"> <div class="id">{!id}</div> <div class="image"><img src="{!image}"></div> <div class="name"><ruby>{!lastName}<rt>{!lastKana}</rt></ruby>&nbsp;<ruby>{!firstName}<rt>{!firstKana}</rt></ruby></div> <div class="note">{!office}<br>{!department}</div> </div>`, headerTemplate: '<div class="template-item"><div class="id">ID</div><div class="image">写真</div><div class="name">氏名</div><div class="note">所属</div></div>', footerTemplate: `<div> <span>選択されている項目: {!instance.getSelectedItem() == null ? '何も選択されていません' : instance.getSelectedItem().name}</span> </div>`, isEditable: document.getElementById('isEditable').checked, autoFilter: autoFilters[document.getElementById('autoFilter').selectedIndex], showSpinButton: document.getElementById('showSpinButton').checked, emptyTemplate: `<div style="height:130px">該当する項目がありません</div>` }); sheet.setCellType(4, 1, gcComboBoxCellType3); var gcComboBoxCellType4 = new GC.Spread.Sheets.CellTypes.GcComboBoxCellType({ items: employees, displayMemberPath: 'fullName', formatItem: (args) => { var item = args.itemObject; item.fullName = item.lastName + ' ' + item.firstName + '(' + item.office + ')'; employees[args.index].fullName = item.fullName; }, generatingItem: (args) => { args.item.classList.add(args.index % 2 ? 'odd' : 'even'); }, isEditable: document.getElementById('isEditable').checked, autoFilter: autoFilters[document.getElementById('autoFilter').selectedIndex], showSpinButton: document.getElementById('showSpinButton').checked, emptyTemplate: `<div style="height:130px">該当する項目がありません</div>` }); sheet.setCellType(6, 1, gcComboBoxCellType4); };
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="ja-jp" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <link rel="stylesheet" type="text/css" href="https://cdn.grapecity.com/inputmanjs/hosted/css/gc.inputman-js.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="https://cdn.grapecity.com/inputmanjs/hosted/scripts/gc.inputman-js.ja.js" type="text/javascript"></script> <script src="https://cdn.grapecity.com/inputmancelltype/hosted/scripts/gc.spread.sheets.inputmancelltype.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/inputman/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <script src="data.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body style="position:absolute;top:0;bottom:0;left:0;right:0;"> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <label><input id="isEditable" type="checkbox">テキストの編集を許可する</label><br> <label for="autoFilter">オートフィルタ</label> <select id="autoFilter"> <option>文字列を含む</option> <option>文字列で始まる</option> <option>なし</option> </select><br><br> <label><input id="showSpinButton" type="checkbox">スピンボタンを表示する</label><br> </div> </div> </body> </html>
const products = ['果汁100%オレンジ', '果汁100%グレープ', '果汁100%レモン', '果汁100%ピーチ', 'コーヒーマイルド', 'コーヒービター']; 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 }, ]; const employees = [ { id: 105, name: '森上 偉久馬', lastKana: 'モリウエ', firstKana: 'イクマ', lastName: '森上', firstName: '偉久馬', office: '東京本社', department: '第一営業', image: 'img/man1.png', tel: '090-1111-1111' }, { id: 107, name: '葛城 孝史', lastKana: 'カツラギ', firstKana: 'コウシ', lastName: '葛城', firstName: '孝史', office: '東京本社', department: '第二営業', image: 'img/man2.png', tel: '090-2222-2222' }, { id: 110, name: '加藤 泰江', lastKana: 'カトウ', firstKana: 'ヤスエ', lastName: '加藤', firstName: '泰江', office: '東京本社', department: '第一営業', image: 'img/woman1.png', tel: '090-3333-3333' }, { id: 204, name: '川村 匡', lastKana: 'カワムラ', firstKana: 'タダシ', lastName: '川村', firstName: '匡', office: '大阪支社', department: '営業開発', image: 'img/man3.png', tel: '090-4444-4444' }, { id: 207, name: '松沢 誠一', lastKana: 'マツザワ', firstKana: 'セイイチ', lastName: '松沢', firstName: '誠一', office: '大阪支社', department: '営業開発', image: 'img/man4.png', tel: '090-5555-5555' }, { id: 210, name: '成宮 真紀', lastKana: 'ナルミヤ', firstKana: 'マキ', lastName: '成宮', firstName: '真紀', office: '大阪支社', department: '営業一', image: 'img/woman2.png', tel: '090-6666-6666' }, ];
/* ウォーターマークのスタイル */ .gcim_watermark_null { color: lightgrey; } .sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; overflow: auto; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; } .option-row { padding-bottom: 8px; } .viewport { line-height: 1.2; } .template-item { display: flex; } .template-item > * { display: flex; justify-content: center; align-items: center; } .id { width: 40px; } .image { width: 50px; } .image img { width: 40px; } .name { width: 110px; justify-content: initial; padding-left: 5px; } .name ruby { font-size: 16px; font-weight: bold; color: #2676c0; } .name rt { font-weight: initial; color: grey; } .list-item[selected="true"] .name ruby, .list-item[selected="true"] .name rt { color: white; } .note { width: 70px; } .odd { background: lavender; }