概要と基本的な使い方 | 機能紹介 | SpreadJS（スプレッドJS）チュートリアルデモアプリケーション

InputManJSセルでは、GcMask型、GcDateTime型、GcNumber型、GcComboBox型などのセル型に対応しており、それぞれの型に適したコントロールでセルを編集できます。 ※InputManJSセルの機能を利用するには、別途InputManJSのライセンスが必要になります。 InputManJSセルを使用するには、InputManJSモジュールと、InputManJSを使用するための間接モジュールを参照します。 gc.inputman-js.ja.js gc.inputman-js.css gc.spread.sheets.inputmancelltype.js 続いて、InputManJSセル型（GcMaskCellTypeなど）のインスタンスを生成してから、setCellTypeメソッドを使用してセル型を設定します。次に、例を示します。

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, 140);
sheet.setColumnWidth(1, 220);
sheet.setColumnWidth(2, 230);
sheet.setColumnWidth(3, 230);
sheet.setRowHeight(2, 30);
sheet.setRowHeight(5, 30);
sheet.setRowHeight(8, 30);
sheet.setRowHeight(11, 30);
sheet.setText(14, 1, '各セル型のB列からD列のセルに、InputManJSを使用したセル型が設定されています。');
sheet.setText(2, 0, 'GcMask型セル：');
sheet.setText(5, 0, 'GcDateTime型セル：');
sheet.setText(8, 0, 'GcNumber型セル：');
sheet.setText(11, 0, 'GcComboBox型セル：');
sheet.setText(1, 1, '郵便番号の入力');
sheet.setText(1, 2, '「ひらがな」のみ入力を許可');
sheet.setText(1, 3, '「ひらがな」以外の全角文字のみ');
sheet.setText(4, 1, '和暦で日付を入力');
sheet.setText(4, 2, 'ドロップダウンカレンダーを使用');
sheet.setText(4, 3, 'ドロップダウンピッカーを使用');
sheet.setText(7, 1, 'スピンボタンを使用');
sheet.setText(7, 2, 'ドロップダウン数値パッドを使用');
sheet.setText(7, 3, 'ドロップダウンスライダーを使用');
sheet.setText(10, 1, 'フッター付きリストを使用');
sheet.setText(10, 2, 'オートフィルターを使用');
sheet.setText(10, 3, 'テンプレートを使用');
setGcMaskCellType(sheet);
setGcDateCellType(sheet);
setGcNumberCellType(sheet);
setGcComboBoxCellType(sheet);
setCellBorder(sheet);
sheet.setValue(2, 1, 9813205);
sheet.setValue(2, 2, 'すぷれっど');
sheet.setValue(2, 3, '平仮名以外１２３ＡＢＣ');
sheet.setValue(5, 1, new Date().toLocaleString());
sheet.setValue(5, 2, new Date().toLocaleString());
sheet.setValue(5, 3, new Date().toLocaleString());
sheet.setValue(8, 1, 12345);
sheet.setValue(8, 2, 12345);
sheet.setValue(8, 3, 50);
};
function setGcMaskCellType(sheet){
var gcMaskCellType1 = new GC.Spread.Sheets.CellTypes.GcMaskCellType({
formatPattern: '〒\\D{3}-\\D{4}',
displayType: 'value'
});
let maskStyle = new GC.Spread.Sheets.Style();
maskStyle.formatter = "〒###-####";
maskStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.left;
maskStyle.cellType = gcMaskCellType1;
sheet.setStyle(2, 1, maskStyle,GC.Spread.Sheets.SheetArea.viewport);
var gcMaskCellType2 = new GC.Spread.Sheets.CellTypes.GcMaskCellType({
formatPattern: '\\Ｊ*'
});
sheet.setCellType(2, 2, gcMaskCellType2);
var gcMaskCellType3 = new GC.Spread.Sheets.CellTypes.GcMaskCellType({
formatPattern: '[\\Ｚ^\\Ｊ]*',
autoConvert: false
});
sheet.setCellType(2, 3, gcMaskCellType3);
sheet.getRange(2, 1, 1, 3).vAlign(GC.Spread.Sheets.VerticalAlign.center);
}
function setGcDateCellType(sheet){
var gcDateTimeCellType1 = new GC.Spread.Sheets.CellTypes.GcDateTimeCellType({
formatPattern: 'gggee年MM月dd日',
displayType: 'value',
showDropDownButton: false
});
let dateStyle1 = new GC.Spread.Sheets.Style();
dateStyle1.formatter = "yyyy/MM/dd (ddd)";
dateStyle1.hAlign = GC.Spread.Sheets.HorizontalAlign.right;
dateStyle1.cellType = gcDateTimeCellType1;
sheet.setStyle(5, 1, dateStyle1, GC.Spread.Sheets.SheetArea.viewport);
var gcDateTimeCellType2 = new GC.Spread.Sheets.CellTypes.GcDateTimeCellType({
formatPattern: 'yyyy/MM/dd',
displayType: 'value',
showDropDownButton: true,
autoDropDown: true
});
sheet.setCellType(5, 2, gcDateTimeCellType2);
let dateStyle2 = new GC.Spread.Sheets.Style();
dateStyle2.formatter = "yyyy/MM/dd (dddd)";
dateStyle2.hAlign = GC.Spread.Sheets.HorizontalAlign.right;
dateStyle2.cellType = gcDateTimeCellType2;
sheet.setStyle(5, 2, dateStyle2, GC.Spread.Sheets.SheetArea.viewport);
var gcDateTimeCellType3 = new GC.Spread.Sheets.CellTypes.GcDateTimeCellType({
formatPattern: 'yyyy/MM/dd HH:mm:ss',
displayType: 'value',
showDropDownButton: true,
dropDownConfig: {
dropDownType: GC.InputMan.DateDropDownType.Picker
},
autoDropDown: true
});
let dateStyle3 = new GC.Spread.Sheets.Style();
dateStyle3.formatter = "yyyy/MM/dd HH:mm:ss";
dateStyle3.hAlign = GC.Spread.Sheets.HorizontalAlign.right;
dateStyle3.cellType = gcDateTimeCellType3;
sheet.setStyle(5, 3, dateStyle3, GC.Spread.Sheets.SheetArea.viewport);
sheet.getRange(5, 1, 1, 3).vAlign(GC.Spread.Sheets.VerticalAlign.center);
}
function setGcNumberCellType(sheet){
var gcNumberCellType1 = new GC.Spread.Sheets.CellTypes.GcNumberCellType({
formatDigit: '##,##0',
displayType: 'value',
showSpinButton: true
});
sheet.setCellType(8, 1, gcNumberCellType1);
sheet.setFormatter(8, 1, '##,##0;[Red]-##,##0');
var gcNumberCellType2 = new GC.Spread.Sheets.CellTypes.GcNumberCellType({
formatDigit: '##,##0',
displayType: 'value',
showNumericPad: true,
autoDropDown: true
});
sheet.setCellType(8, 2, gcNumberCellType2);
sheet.setFormatter(8, 2, '##,##0;[Red]-##,##0');
var gcNumberCellType3 = new GC.Spread.Sheets.CellTypes.GcNumberCellType({
showDropDownSlider: true,
maxValue: 100,
minValue: 0,
dropDownConfig: {
step: 10,
marks: [0, 25, 50, 75, 100],
markLabelFormat: (v) => `D:${v}km`,
},
displayType: 'value',
autoDropDown: true
});
sheet.setCellType(8, 3, gcNumberCellType3);
sheet.getRange(8, 1, 1, 3).vAlign(GC.Spread.Sheets.VerticalAlign.center);
}
function setGcComboBoxCellType(sheet){
var gcComboBoxCellType1 = new GC.Spread.Sheets.CellTypes.GcComboBoxCellType({
items: ['果汁100%オレンジ', '果汁100%グレープ', '果汁100%レモン', '果汁100%ピーチ', 'コーヒーマイルド', 'コーヒービター'],
footerTemplate: `<div>
<span>選択中の項目: {!instance.getSelectedItem() == null ? '未選択' : instance.getSelectedItem().Text}</span>
</div>`,
isEditable: false
});
sheet.setCellType(11, 1, gcComboBoxCellType1);
var gcComboBoxCellType2 = new GC.Spread.Sheets.CellTypes.GcComboBoxCellType({
items: ['Japan', 'JAPAN', 'japan', 'じゃぱん', 'ジャパン'],
isEditable: true,
autoCompleteMode: GC.InputMan.AutoCompleteMode.SuggestAppend,
autoCompleteMatchMode: GC.InputMan.AutoCompleteMatchMode.AmbiguousStartWith,
autoDropDown: true
});
sheet.setCellType(11, 2, gcComboBoxCellType2);
var gcComboBoxCellType3 = new GC.Spread.Sheets.CellTypes.GcComboBoxCellType({
items: [
{ logo: '$DEMOROOT$/spread/source/images/imjs/AR.png', name: 'ActiveReports', category: '帳票・レポート', description: '日本仕様の帳票開発に必要な機能を搭載したコンポーネント' },
{ logo: '$DEMOROOT$/spread/source/images/imjs/SP.png', name: 'SPREAD', category: '表計算・グリッド', description: 'Excel風のビューと表計算機能を実現するUIコンポーネント' },
{ logo: '$DEMOROOT$/spread/source/images/imjs/C1.png', name: 'ComponentOne', category: 'コンポーネントセット', description: 'Visual Studioで利用する.NET Framework用コンポーネント' },
{ logo: '$DEMOROOT$/spread/source/images/imjs/IM.png', name: 'InputMan', category: '入力支援', description: '快適な入力を実現する日本仕様入力コンポーネントセット' },
{ logo: '$DEMOROOT$/spread/source/images/imjs/MR.png', name: 'MultiRow', category: '多段明細', description: '1レコード複数行&日付表示に最適なグリッドコンポーネント' },
{ logo: '$DEMOROOT$/spread/source/images/imjs/DD.png', name: 'DioDocs', category: 'ドキュメントAPI', description: 'ドキュメントを生成、更新するAPIライブラリ' },
],
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',
isEditable: false,
generatingItem: (args) => {
args.item.classList.add(args.index % 2 ? 'odd' : 'even');
}
});
sheet.setCellType(11, 3, gcComboBoxCellType3);
sheet.getRange(11, 1, 1, 3).vAlign(GC.Spread.Sheets.VerticalAlign.center);
}
function setCellBorder(sheet){
sheet
.getRange(1, 1, 1, 3)
.foreColor('#000')
.backColor('#FFF3CE')
.setBorder(new GC.Spread.Sheets.LineBorder('orange', GC.Spread.Sheets.LineStyle.thin), { all: true });
sheet
.getRange(1, 1, 2, 3)
.setBorder(new GC.Spread.Sheets.LineBorder('orange', GC.Spread.Sheets.LineStyle.medium), { outline: true });
sheet
.getRange(4, 1, 1, 3)
.foreColor('#000')
.backColor('#FFF3CE')
.setBorder(new GC.Spread.Sheets.LineBorder('orange', GC.Spread.Sheets.LineStyle.thin), { all: true });
sheet
.getRange(4, 1, 2, 3)
.setBorder(new GC.Spread.Sheets.LineBorder('orange', GC.Spread.Sheets.LineStyle.medium), { outline: true });
sheet
.getRange(7, 1, 1, 3)
.foreColor('#000')
.backColor('#FFF3CE')
.setBorder(new GC.Spread.Sheets.LineBorder('orange', GC.Spread.Sheets.LineStyle.thin), { all: true });
sheet
.getRange(7, 1, 2, 3)
.setBorder(new GC.Spread.Sheets.LineBorder('orange', GC.Spread.Sheets.LineStyle.medium), { outline: true });
sheet
.getRange(10, 1, 1, 3)
.foreColor('#000')
.backColor('#FFF3CE')
.setBorder(new GC.Spread.Sheets.LineBorder('orange', GC.Spread.Sheets.LineStyle.thin), { all: true });
sheet
.getRange(10, 1, 2, 3)
.setBorder(new GC.Spread.Sheets.LineBorder('orange', GC.Spread.Sheets.LineStyle.medium), { outline: true });
}

<!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>
<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>
</body>
</html>

/* ウォーターマークのスタイル */
.gcim_watermark_null {
color: lightgrey;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
.gcim_input_helper {
border: none;
width: 0;
left: 0 !important;
top: 0 !important;
padding: 0;
margin: 0;
}
.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;
}