GcNumber型セルを作成するには、次の例のようなコードを使用します。
GcNumber型セルの主なオプションは以下の通りです。オプションの完全なリストと機能の詳細については、InputManJSのAPIリファレンスやデモアプリケーションを参照してください。
formatDigit: 入力時の数値の桁数、および小数点と桁区切り記号の位置を設定します。
positivePrefix: 入力時の正の数値の前に配置する通貨記号や負号などのリテラル文字を設定します。
positiveSuffix: 入力時の正の数値の後に配置するリテラル文字を設定します。
negativePrefix: 入力時の負の数値の前に配置する通貨記号や負号などのリテラル文字を設定します。
negativeSuffix: 入力時の負の数値の後に配置するリテラル文字を設定します。
displayType: セルの値に入力書式と同じ文字列を設定する場合は'text'を、数値を設定する場合は'value'を設定します。'value'を設定した場合、セルのフォーマッタで指定された書式で表示されます。
showSpinButton: スピンボタンを表示します。
spinOnKeys: 上下キーの操作を有効にします。
spinWrap: 値が最大値に達した場合は最小値に、最小値に達した場合は最大値に、それぞれ自動的に値を変更します。
showNumericPad: ドロップダウンに数値パッドを追加します。
autoDropDown: 入力時にドロップダウンを自動的に表示するかどうかを設定します。
minDate: 入力可能な数値の最小値を設定します。
maxDate: 入力可能な数値の最大値を設定します。
watermarkNullText: 未入力のときの代替テキストを設定します。
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-resources-ja';
GC.Spread.Common.CultureManager.culture("ja-jp");
import './styles.css';
import { AppFunc } from './app-func';
// import { App } from './app-class';
// 1. Functional Component sample
createRoot(document.getElementById('app')).render(<AppFunc />);
// 2. Class Component sample
// createRoot(document.getElementById('app')).render(<App />);
import * as React from 'react';
import GC2 from '@mescius/spread-sheets';
import * as GC from '@mescius/inputman';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import { GcNumberCellType } from '@mescius/spread-sheets-inputmancelltype'
import { GcNumber } from "@mescius/inputman.react";
import '@mescius/inputman/CSS/gc.inputman-js.css';
GC.InputMan.appearanceStyle = GC.InputMan.AppearanceStyle.Modern;
const formatPatterns = ['¥#####', '税込 ##,##0円', '##,##0.00']
let sheet = null;
export function AppFunc() {
const [option, setOption] = React.useState({
formatPattern: 0,
displayTypeText: false,
showSpinButton: false,
showNumericPad: false,
watermarkNullText: false,
maxValue: 99999,
minValue: -99999
});
const initSpread = (spread) => {
sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.setColumnWidth(0, 100);
sheet.setColumnWidth(1, 150);
sheet.setColumnWidth(2, 120);
sheet.setColumnWidth(3, 120);
sheet.setColumnWidth(4, 120);
sheet.setColumnWidth(5, 120);
sheet.setColumnWidth(6, 100);
sheet.setRowHeight(2, 30);
sheet.setText(0, 1, 'B3セルにGcNumber型セルが設定されています。');
sheet.setText(1, 1, ' ↓');
sheet
.getRange(2, 1, 1, 1)
.vAlign(GC2.Spread.Sheets.VerticalAlign.center)
.setBorder(new GC2.Spread.Sheets.LineBorder('orange', GC2.Spread.Sheets.LineStyle.medium), { outline: true });
sheet.setText(4, 0, '右側のパネルの書式には、それぞれ以下のような書式が設定されています。');
sheet.setText(6, 1, '数値書式');
sheet.setText(6, 2, '正数の接頭書式');
sheet.setText(6, 3, '正数の接尾書式');
sheet.setText(6, 4, '負数の接頭書式');
sheet.setText(6, 5, '負数の接尾書式');
sheet.setText(6, 6, '通貨記号');
sheet.setText(7, 0, '¥##### ');
sheet.setText(8, 0, '税込 ##,##0円 ');
sheet.setText(9, 0, '##,##0.00 ');
sheet
.getRange(7, 0, 3, 1, GC2.Spread.Sheets.SheetArea.viewport).hAlign(GC2.Spread.Sheets.HorizontalAlign.right);
sheet.setText(7, 1, ' #####');
sheet.setText(7, 2, ' $');
sheet.setText(7, 3, '');
sheet.setText(7, 4, ' -$');
sheet.setText(7, 5, '');
sheet.setText(7, 6, ' ¥');
sheet.setText(8, 1, ' ##,##0');
sheet.setText(8, 2, ' 税込 ');
sheet.setText(8, 3, ' 円');
sheet.setText(8, 4, ' 税込 ▲');
sheet.setText(8, 5, ' 円');
sheet.setText(8, 6, '');
sheet.setText(9, 1, '##,##0.00');
sheet.setText(9, 2, '');
sheet.setText(9, 3, '');
sheet.setText(9, 4, ' -');
sheet.setText(9, 5, '');
sheet.setText(9, 6, '');
sheet
.getRange(6, 1, 1, 6).backColor('#FFF3CE')
sheet
.getRange(6, 1, 4, 6)
.setBorder(new GC2.Spread.Sheets.LineBorder('orange', GC2.Spread.Sheets.LineStyle.thin), { all: true });
sheet
.getRange(6, 1, 4, 6)
.setBorder(new GC2.Spread.Sheets.LineBorder('orange', GC2.Spread.Sheets.LineStyle.medium), { outline: true });
sheet.setText(12, 0, 'パネルで各プロパティを変更すると、B3セルのGcNumber型セルに設定されます。');
sheet.setText(13, 0, '書式で使用できるキーワードの詳細については、InputManJSのヘルプまたはオンラインデモをご参照ください。');
sheet.setValue(2, 1, 1000);
updateProperty(option)
sheet.resumePaint();
}
const updateProperty = (settings) => {
var formatDigit, positivePrefix, positiveSuffix, negativePrefix, negativeSuffix;
switch (settings.formatPattern) {
case 0:
formatDigit = '#####';
positivePrefix = '$';
positiveSuffix = '';
negativePrefix = '-$';
negativeSuffix = '';
break;
case 1:
formatDigit = '##,##0';
positivePrefix = '税込 ';
positiveSuffix = '円';
negativePrefix = '税込 ▲';
negativeSuffix = '円';
break;
case 2:
formatDigit = '##,##0.00';
positivePrefix = '';
positiveSuffix = '';
negativePrefix = '-';
negativeSuffix = '';
break;
default:
break;
}
var gcNumberCellType = new GcNumberCellType({
formatDigit: formatDigit,
positivePrefix: positivePrefix,
positiveSuffix: positiveSuffix,
negativePrefix: negativePrefix,
negativeSuffix: negativeSuffix,
displayType: settings.displayTypeText ? 'text' : 'value',
showSpinButton: settings.showSpinButton,
showNumericPad: settings.showNumericPad,
minValue: settings.minValue,
maxValue: settings.maxValue,
watermarkNullText: settings.watermarkNullText ? '値を入力してください' : ''
});
sheet.setCellType(2, 1, gcNumberCellType);
sheet.setActiveCell(2, 1);
setOption(settings);
}
return (<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
<Worksheet />
</SpreadSheets>
</div>
<Panel updateProperty={(e, settings) => { updateProperty(e, settings) }} setting={option} />
</div>);
}
function Panel(props) {
const [setting, setSetting] = React.useState(props.setting);
React.useEffect(() => {
if (setting != props.setting) {
setSetting(props.setting);
}
}, [props.setting]);
const updateState = (newSetting) => {
setSetting(newSetting);
props.updateProperty(newSetting);
}
return (
<div class="options-container">
<label for="format">書式 </label>
<select id="format" onChange={(e) => { updateState({ ...setting, formatPattern: e.target.selectedIndex }) }}>
{
formatPatterns.map((item) => {
return <option>{item}</option>
})
}
</select><br /><br />
<label><input id="displayTypeText" type="checkbox" onChange={(e) => { updateState({ ...setting, displayTypeText: e.target.checked }) }} />入力書式と同じ文字列をセルに表示</label><br /><br />
<label><input id="showSpinButton" type="checkbox" onChange={(e) => { updateState({ ...setting, showSpinButton: e.target.checked }) }} />スピンボタン</label><br /><br />
<label><input id="showNumericPad" type="checkbox" onChange={(e) => { updateState({ ...setting, showNumericPad: e.target.checked }) }} />ドロップダウンキーパッド</label><br /><br />
<label>最小値 </label>
<GcNumber value={setting.minValue} className={'displayStyle'} onValueChanged={(sender) => { updateState({ ...setting, minValue: sender.getValue() }); }}></GcNumber><br /><br />
<label>最大値 </label>
<GcNumber value={setting.maxValue} className={'displayStyle'} onValueChanged={(sender) => { updateState({ ...setting, maxValue: sender.getValue() }); }}></GcNumber><br /><br />
<label><input id="watermarkNullText" type="checkbox" onChange={(e) => { updateState({ ...setting, watermarkNullText: e.target.checked }) }} />未入力時の代替テキスト</label><br /><br />
</div>
);
}
import * as React from 'react';
import GC2 from '@mescius/spread-sheets';
import * as GC from '@mescius/inputman';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import { GcNumberCellType } from '@mescius/spread-sheets-inputmancelltype'
import { GcNumber } from "@mescius/inputman.react";
import '@mescius/inputman/CSS/gc.inputman-js.css';
const formatPatterns = ['¥#####', '税込 ##,##0円', '##,##0.00']
const Component = React.Component;
export class App extends Component {
constructor(props) {
GC.InputMan.appearanceStyle = GC.InputMan.AppearanceStyle.Modern;
super(props);
this.sheet = null;
this.state = {
formatPattern: 0,
displayTypeText: false,
showSpinButton: false,
showNumericPad: false,
watermarkNullText: false,
maxValue: 99999,
minValue: -99999
}
}
render() {
return (<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet />
</SpreadSheets>
</div>
<Panel updateProperty={(e, settings) => { this.updateProperty(e, settings) }} setting={this.state} />
</div>);
}
initSpread(spread) {
const sheet = spread.getSheet(0);
this.sheet = sheet;
sheet.suspendPaint();
sheet.setColumnWidth(0, 100);
sheet.setColumnWidth(1, 150);
sheet.setColumnWidth(2, 120);
sheet.setColumnWidth(3, 120);
sheet.setColumnWidth(4, 120);
sheet.setColumnWidth(5, 120);
sheet.setColumnWidth(6, 100);
sheet.setRowHeight(2, 30);
sheet.setText(0, 1, 'B3セルにGcNumber型セルが設定されています。');
sheet.setText(1, 1, ' ↓');
sheet
.getRange(2, 1, 1, 1)
.vAlign(GC2.Spread.Sheets.VerticalAlign.center)
.setBorder(new GC2.Spread.Sheets.LineBorder('orange', GC2.Spread.Sheets.LineStyle.medium), { outline: true });
sheet.setText(4, 0, '右側のパネルの書式には、それぞれ以下のような書式が設定されています。');
sheet.setText(6, 1, '数値書式');
sheet.setText(6, 2, '正数の接頭書式');
sheet.setText(6, 3, '正数の接尾書式');
sheet.setText(6, 4, '負数の接頭書式');
sheet.setText(6, 5, '負数の接尾書式');
sheet.setText(6, 6, '通貨記号');
sheet.setText(7, 0, '¥##### ');
sheet.setText(8, 0, '税込 ##,##0円 ');
sheet.setText(9, 0, '##,##0.00 ');
sheet
.getRange(7, 0, 3, 1, GC2.Spread.Sheets.SheetArea.viewport).hAlign(GC2.Spread.Sheets.HorizontalAlign.right);
sheet.setText(7, 1, ' #####');
sheet.setText(7, 2, ' $');
sheet.setText(7, 3, '');
sheet.setText(7, 4, ' -$');
sheet.setText(7, 5, '');
sheet.setText(7, 6, ' ¥');
sheet.setText(8, 1, ' ##,##0');
sheet.setText(8, 2, ' 税込 ');
sheet.setText(8, 3, ' 円');
sheet.setText(8, 4, ' 税込 ▲');
sheet.setText(8, 5, ' 円');
sheet.setText(8, 6, '');
sheet.setText(9, 1, '##,##0.00');
sheet.setText(9, 2, '');
sheet.setText(9, 3, '');
sheet.setText(9, 4, ' -');
sheet.setText(9, 5, '');
sheet.setText(9, 6, '');
sheet
.getRange(6, 1, 1, 6).backColor('#FFF3CE')
sheet
.getRange(6, 1, 4, 6)
.setBorder(new GC2.Spread.Sheets.LineBorder('orange', GC2.Spread.Sheets.LineStyle.thin), { all: true });
sheet
.getRange(6, 1, 4, 6)
.setBorder(new GC2.Spread.Sheets.LineBorder('orange', GC2.Spread.Sheets.LineStyle.medium), { outline: true });
sheet.setText(12, 0, 'パネルで各プロパティを変更すると、B3セルのGcNumber型セルに設定されます。');
sheet.setText(13, 0, '書式で使用できるキーワードの詳細については、InputManJSのヘルプまたはオンラインデモをご参照ください。');
sheet.setValue(2, 1, 1000);
this.updateProperty(this.state)
sheet.resumePaint();
}
updateProperty(settings) {
var formatDigit, positivePrefix, positiveSuffix, negativePrefix, negativeSuffix;
switch (settings.formatPattern) {
case 0:
formatDigit = '#####';
positivePrefix = '$';
positiveSuffix = '';
negativePrefix = '-$';
negativeSuffix = '';
break;
case 1:
formatDigit = '##,##0';
positivePrefix = '税込 ';
positiveSuffix = '円';
negativePrefix = '税込 ▲';
negativeSuffix = '円';
break;
case 2:
formatDigit = '##,##0.00';
positivePrefix = '';
positiveSuffix = '';
negativePrefix = '-';
negativeSuffix = '';
break;
default:
break;
}
var gcNumberCellType = new GcNumberCellType({
formatDigit: formatDigit,
positivePrefix: positivePrefix,
positiveSuffix: positiveSuffix,
negativePrefix: negativePrefix,
negativeSuffix: negativeSuffix,
displayType: settings.displayTypeText ? 'text' : 'value',
showSpinButton: settings.showSpinButton,
showNumericPad: settings.showNumericPad,
minValue: settings.minValue,
maxValue: settings.maxValue,
watermarkNullText: settings.watermarkNullText ? '値を入力してください' : ''
});
this.sheet.setCellType(2, 1, gcNumberCellType);
this.sheet.setActiveCell(2, 1);
}
}
class Panel extends Component {
constructor(props) {
super(props);
this.state = this.props.setting;
}
componentWillReceiveProps(nextProps) {
this.setState(nextProps.setting);
}
updateState(state) {
this.setState(state, () => {
this.props.updateProperty(this.state);
});
}
render() {
return (
<div class="options-container">
<label for="format">書式 </label>
<select id="format" onChange={(e) => { this.updateState({ formatPattern: e.target.selectedIndex }) }}>
{
formatPatterns.map((item) => {
return <option>{item}</option>
})
}
</select><br /><br />
<label><input id="displayTypeText" type="checkbox" onChange={(e) => { this.updateState({ displayTypeText: e.target.checked }) }} />入力書式と同じ文字列をセルに表示</label><br /><br />
<label><input id="showSpinButton" type="checkbox" onChange={(e) => { this.updateState({ showSpinButton: e.target.checked }) }} />スピンボタン</label><br /><br />
<label><input id="showNumericPad" type="checkbox" onChange={(e) => { this.updateState({ showNumericPad: e.target.checked }) }} />ドロップダウンキーパッド</label><br /><br />
<label>最小値 </label>
<GcNumber value={this.state.minValue} className={'displayStyle'} onValueChanged={(sender) => { this.updateState({ minValue: sender.getValue() }); }}></GcNumber><br /><br />
<label>最大値 </label>
<GcNumber value={this.state.maxValue} className={'displayStyle'} onValueChanged={(sender) => { this.updateState({ maxValue: sender.getValue() }); }}></GcNumber><br /><br />
<label><input id="watermarkNullText" type="checkbox" onChange={(e) => { this.updateState({ watermarkNullText: e.target.checked }) }} />未入力時の代替テキスト</label><br /><br />
</div>
)
}
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/ja/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/ja/lib/react/license.js')
.then(function(){
System.import('$DEMOROOT$/spread/source/js/inputman/react_vue/license.js');
})
.then(function () {
System.import('./src/app');
});
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
/* ウォーターマークのスタイル */
.gcim_watermark_null {
color: lightgrey;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
overflow: auto;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
}
.option-row {
padding-bottom: 8px;
}
.displayStyle{
display: inline-block
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true,
react: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@grapecity/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-ja': 'npm:@mescius/spread-sheets-resources-ja/index.js',
'@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'react': 'npm:react/cjs/react.production.js',
'react-dom': 'npm:react-dom/cjs/react-dom.production.js',
'react-dom/client': 'npm:react-dom/cjs/react-dom-client.production.js',
'scheduler': 'npm:scheduler/cjs/scheduler.production.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js',
'@mescius/spread-sheets-inputmancelltype': 'npm:@mescius/spread-sheets-inputmancelltype/index.js',
'@mescius/inputman': 'npm:@mescius/inputman/index.js',
"@mescius/inputman/CSS": "npm:@mescius/inputman/CSS",
"@mescius/inputman.react": "npm:@mescius/inputman.react/GcInputMan.component.js",
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
