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 () {
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, 'GcMask型セル');
sheet.setValue(1, 0, 'GcDateTime型セル');
sheet.setValue(2, 0, 'GcNumber型セル');
sheet.setValue(3, 0, 'GcComboBox型セル');
sheet.setValue(0, 1, '');
sheet.setValue(1, 1, new Date().toLocaleString());
sheet.setValue(2, 1, 0);
var gcMaskCellType = new GC.Spread.Sheets.CellTypes.GcMaskCellType({
formatPattern: '℡:\\D{2,4}-\\D{2,4}-\\D{4}'
});
sheet.setCellType(0, 1, gcMaskCellType);
var gcDateTimeCellType = new GC.Spread.Sheets.CellTypes.GcDateTimeCellType({
formatPattern: 'yyyy/MM/dd HH:mm:ss',
displayType: 'text',
showDropDownButton: true
});
sheet.setCellType(1, 1, gcDateTimeCellType);
var gcNumberCellType = new GC.Spread.Sheets.CellTypes.GcNumberCellType({
formatDigit: '##,##0',
displayType: 'text',
showSpinButton: true
});
sheet.setCellType(2, 1, gcNumberCellType);
var gcComboBoxCellType = new GC.Spread.Sheets.CellTypes.GcComboBoxCellType({
items: ['果汁100%オレンジ', '果汁100%グレープ', '果汁100%レモン', '果汁100%ピーチ', 'コーヒーマイルド', 'コーヒービター']
});
sheet.setCellType(3, 1, gcComboBoxCellType);
};
<!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="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>
<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;
}
