受注明細

受注管理画面を想定したサンプルフォームです。

<p>次のセルでは、InputManJSセルを使用してセルを編集することができます。</p> <ul> <li><strong>郵便番号: マスク型</strong></li> <li><strong>受注日: 日付時刻型</strong></li> <li><strong>出荷日: 日付時刻型</strong></li> <li><strong>区分名: マスク型</strong></li> <li><strong>単価: 数値型</strong></li> <li><strong>数量: 数値型</strong></li> </ul>
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss')); initSpread(spread); var 受注コード = new GC.InputMan.GcNumber(document.getElementById('受注コード'), { minValue: 1001, maxValue: 1120, showSpinButton: true }); var sheet = spread.getSheet(0); 受注コード.onInput(function (sender, eArgs) { setDataSource(sheet, 受注コード.getValue() - 1001); }); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.setColumnWidth(0, 100); sheet.setColumnWidth(1, 200); sheet.setColumnWidth(2, 100); sheet.setColumnWidth(3, 200); sheet.setValue(0, 0, '担当社員'); sheet.setValue(0, 2, '出荷先'); sheet.setValue(6, 0, '商品一覧'); sheet.setValue(13, 0, '合計'); sheet.addSpan(0, 0, 1, 2); sheet.addSpan(0, 2, 1, 4); sheet.addSpan(6, 0, 1, 6); sheet.addSpan(13, 0, 1, 6); sheet.setValue(14, 0, '税抜'); sheet.setValue(14, 2, '税込'); sheet.setFormula(14, 1, '=SUMPRODUCT(E9:E14,F9:F14)'); sheet.setFormula(14, 3, '=B15*1.08'); var styleHeader = new GC.Spread.Sheets.Style(); styleHeader.backColor = '#5a6268'; styleHeader.foreColor = 'white'; sheet.setStyle(0, 0, styleHeader); sheet.setStyle(0, 2, styleHeader); sheet.setStyle(6, 0, styleHeader); sheet.setStyle(13, 0, styleHeader); var styleCurrency = new GC.Spread.Sheets.Style(); styleCurrency.formatter = '#,###円'; sheet.setStyle(14, 1, styleCurrency); sheet.setStyle(14, 3, styleCurrency); var styleDate = new GC.Spread.Sheets.Style(); styleDate.formatter = 'yyyy/MM/dd'; styleDate.hAlign = GC.Spread.Sheets.HorizontalAlign.left; sheet.setStyle(4, 3, styleDate); sheet.setStyle(5, 3, styleDate); var styleAlignLeft = new GC.Spread.Sheets.Style(); styleAlignLeft.hAlign = GC.Spread.Sheets.HorizontalAlign.left; sheet.setStyle(1, 1, styleAlignLeft); var fields = [ { row: 1, col: 0, name: '社員コード' }, { row: 2, col: 0, name: 'フリガナ' }, { row: 3, col: 0, name: '氏名' }, { row: 4, col: 0, name: '在籍支社' }, { row: 5, col: 0, name: '部署名' }, { row: 1, col: 2, name: '出荷先名' }, { row: 2, col: 2, name: '郵便番号' }, { row: 3, col: 2, name: '住所' }, { row: 4, col: 2, name: '受注日' }, { row: 5, col: 2, name: '出荷日' } ]; for (var i = 0; i < fields.length; i++) { var f = fields[i]; sheet.setValue(f.row, f.col, f.name); sheet.setBindingPath(f.row, f.col + 1, f.name); } var table = sheet.tables.add('受注明細', 7, 0, 6, 6); table.bindingPath('受注明細'); setDataSource(sheet, 0); // InputManJSセル型を設定 var gcYubinCellType = new GC.Spread.Sheets.CellTypes.GcMaskCellType({ formatPattern: '〒\\D{3}-\\D{4}' }); sheet.setCellType(2, 3, gcYubinCellType); var gcDateTimeCellType = new GC.Spread.Sheets.CellTypes.GcDateTimeCellType({ formatPattern: 'yyyy/MM/dd', showDropDownButton: true }); sheet.setCellType(4, 3, gcDateTimeCellType); sheet.setCellType(5, 3, gcDateTimeCellType); var gcNumberCellType = new GC.Spread.Sheets.CellTypes.GcNumberCellType({ formatDigit: '##,##0', showSpinButton: true }); for (var r = 8; r <= 13; r++) { for (var c = 4; c <= 5; c++) { sheet.setCellType(r, c, gcNumberCellType); } } var gcKubunCellType = new GC.Spread.Sheets.CellTypes.GcMaskCellType({ formatPattern: '(飲料|調味料|菓子類|乳製品|穀類、シリアル|肉類|加工食品|魚介類)', showSpinButton: true }); for (var r = 8; r <= 13; r++) { sheet.setCellType(r, 3, gcKubunCellType); } }; function setDataSource(sheet, index) { sheet.setDataSource(new GC.Spread.Sheets.Bindings.CellBindingSource(受注[index])); }
<!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/data/orders.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> <div class="sample-tutorial"> <label>受注コード<input id="受注コード"></label> <div id="ss" style="width:100%;height:100%"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }