概要と基本的な使い方

SpreadJSでは、別売りのInputManJSを使用して、標準のセル型より高度な機能を用いてセルを編集することができます。

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="$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> <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; }