GcComboBox型セルを作成するには、次の例のようなコードを使用します。
GcComboBox型セルの主なオプションは以下の通りです。オプションの完全なリストと機能の詳細については、InputManJSのAPIリファレンスやデモアプリケーションを参照してください。
items: ドロップダウンのデータソースを設定します。
columns: ドロップダウンを複数列で表示する場合に、各列の設定を定義します。
displayMemberPath: ドロップダウンに表示するメンバーを指定します。
valueMemberPath: ドロップダウンのアイテムから値として参照するメンバーを指定します。
isEditable: コンボボックスに入力できるかどうかを設定します。
autoFilter: コンボボックスのフィルタリング方法を指定します。
autoDropDown: 入力時にドロップダウンを自動的に表示するかどうかを設定します。(isEditableがtrueの場合のみ有効)
dropDownHeight: ドロップダウンの高さを設定します。
dropDownWidth: ドロップダウンの幅を設定します。
itemHeight: ドロップダウンのアイテムの高さを設定します。
showSpinButton: スピンボタンを表示するかどうかを設定します。
watermarkNullText: 未入力のときの代替テキストを設定します。
const autoFilters = [
GC.InputMan.AutoFilter.Contains,
GC.InputMan.AutoFilter.StartWith,
GC.InputMan.AutoFilter.None
];
window.onload = function () {
GC.InputMan.appearanceStyle = GC.InputMan.AppearanceStyle.Modern;
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.setRowHeight(2, 30);
sheet.setRowHeight(4, 30);
sheet.setRowHeight(6, 30);
sheet.setRowHeight(8, 30);
sheet.setText(0, 1, 'B3, B5, B7, B9セルにGcComboBox型セルが設定されています。');
sheet.setText(1, 1, ' ↓');
sheet.setValue(2, 0, 'シンプルなリスト:');
sheet.setValue(4, 0, '複数列のリスト:');
sheet.setValue(6, 0, 'テンプレート:');
sheet.setValue(8, 0, 'カスタムリスト:');
sheet.setText(11, 0, '右のパネルで各プロパティを変更すると、B3, B5, B7, B9セルのGcComboBox型セルに設定されます。');
sheet
.getRange(2, 1, 1, 1)
.vAlign(GC.Spread.Sheets.VerticalAlign.center)
.setBorder(new GC.Spread.Sheets.LineBorder('orange', GC.Spread.Sheets.LineStyle.medium), { outline: true });
sheet
.getRange(4, 1, 1, 1)
.vAlign(GC.Spread.Sheets.VerticalAlign.center)
.setBorder(new GC.Spread.Sheets.LineBorder('orange', GC.Spread.Sheets.LineStyle.medium), { outline: true });
sheet
.getRange(6, 1, 1, 1)
.vAlign(GC.Spread.Sheets.VerticalAlign.center)
.setBorder(new GC.Spread.Sheets.LineBorder('orange', GC.Spread.Sheets.LineStyle.medium), { outline: true });
sheet
.getRange(8, 1, 1, 1)
.vAlign(GC.Spread.Sheets.VerticalAlign.center)
.setBorder(new GC.Spread.Sheets.LineBorder('orange', GC.Spread.Sheets.LineStyle.medium), { outline: true });
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(2, 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(4, 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> <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(6, 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(8, 1, gcComboBoxCellType4);
sheet.setActiveCell(2, 1);
};
<!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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@mescius/inputman/CSS/gc.inputman-js.css">
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/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$/ja/purejs/node_modules/@mescius/inputman/JS/gc.inputman-js.ja.js" type="text/javascript"></script>
<script src="https://cdn.mescius.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: '$DEMOROOT$/spread/source/images/imjs/man1.png', tel: '090-1111-1111' },
{ id: 107, name: '葛城 孝史', lastKana: 'カツラギ', firstKana: 'コウシ', lastName: '葛城', firstName: '孝史', office: '東京本社', department: '第二営業', image: '$DEMOROOT$/spread/source/images/imjs/man2.png', tel: '090-2222-2222' },
{ id: 110, name: '加藤 泰江', lastKana: 'カトウ', firstKana: 'ヤスエ', lastName: '加藤', firstName: '泰江', office: '東京本社', department: '第一営業', image: '$DEMOROOT$/spread/source/images/imjs/woman1.png', tel: '090-3333-3333' },
{ id: 204, name: '川村 匡', lastKana: 'カワムラ', firstKana: 'タダシ', lastName: '川村', firstName: '匡', office: '大阪支社', department: '営業開発', image: '$DEMOROOT$/spread/source/images/imjs/man3.png', tel: '090-4444-4444' },
{ id: 207, name: '松沢 誠一', lastKana: 'マツザワ', firstKana: 'セイイチ', lastName: '松沢', firstName: '誠一', office: '大阪支社', department: '営業開発', image: '$DEMOROOT$/spread/source/images/imjs/man4.png', tel: '090-5555-5555' },
{ id: 210, name: '成宮 真紀', lastKana: 'ナルミヤ', firstKana: 'マキ', lastName: '成宮', firstName: '真紀', office: '大阪支社', department: '営業一', image: '$DEMOROOT$/spread/source/images/imjs/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;
}
.gcim_input_helper {
border: none;
width: 0;
left: 0 !important;
top: 0 !important;
padding: 0;
margin: 0;
}