概要と基本的な使い方

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

<p>InputManJSセルでは、マスク型、日付時刻型、数値型などのセル型に対応しており、それぞれの型に適したコントロールでセルを編集できます。</p> <p>※InputManJSセルの機能を利用するには、別途InputManJSのライセンスが必要になります。</p> <p>InputManJSセルを使用するには、InputManJSモジュールと、InputManJSを使用するための間接モジュールを参照します。</p> <ul> <li><strong>gc.inputman-js.ja.js</strong></li> <li><strong>gc.inputman-js.css</strong></li> <li><strong>gc.spread.sheets.inputmancelltype.js</strong></li> </ul> <p>続いて、InputManJSセル型(GcMaskCellTypeなど)のインスタンスを生成してから、setCellTypeメソッドを使用してセル型を設定します。次に、例を示します。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> gcMaskCellType = <span class="hljs-keyword">new</span> GC.Spread.Sheets.CellTypes.GcMaskCellType({ <span class="hljs-attr">formatPattern</span>: <span class="hljs-string">'℡:\D{2,4}-\D{2,4}-\D{4}'</span> }); sheet.setCellType(<span class="hljs-number">0</span>, <span class="hljs-number">1</span>, gcMaskCellType); </code></pre>
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(1, 0, '日付時刻型セル'); sheet.setValue(2, 0, '数値型セル'); 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); };
<!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; }