次のセルでは、InputManJSセルを使用してセルを編集することができます。
郵便番号: マスク型
受注日: 日付時刻型
出荷日: 日付時刻型
区分名: マスク型
単価: 数値型
数量: 数値型
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/@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$/spread/source/data/orders.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>
<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;
}
