SpreadJSの入力にInputManJSセルを使う

SpreadJS(スプレッドJS)」には、InputManJSを統合するInputManJSセルという機能があります。バージョンV13.2Jでは、このInputManJSセルに、新しくGcComboBox型セルが追加されました。

今回は、このGcComboBox型セルに従来からのGcMask、GcNumber、GcDateTimeの各セル型を加えた4つのInputManJSセルの豊富な機能と使い方をご紹介します。

注意
InputManJSセルの使用には、SpreadJSInputManJSのライセンスが必要です。
  1. InputManJSセルとは?
  2. GcMask型セル
  3. GcDateTime型セル
  4. GcNumber型セル
  5. GcComboBox型セル
  6. 実行サンプル
  7. おわりに

1. InputManJSセルとは?

InputManJSセルは、セルの編集モードでInputManJSのコントロールと統合することで、入力書式や表示書式を指定して、簡単にそして効率的に値を入力できるようにします。

InputManJSセルではInputManJSのコントロールに備わっている汎用的な機能をはじめ、各コントロール独自の機能を利用できます。

InputManJSセルの汎用的な機能

項目 説明
書式設定 データに応じた書式と文字種の指定
入力制御 リテラル文字や改行コードの扱い方/入力可能範囲の指定
フォーカス移動 自動フォーカス移動/フィールド間の移動
未入力時の表示 未入力時の代替文字表示
スピン機能 値の増減/選択項目の移動
クリアボタン 入力値を一括クリアするボタンの表示
長体表示 長い文字列をセル内に収める縮小表示
スタイル設定 状態に応じた各部位のスタイル設定

InputManJSセルの汎用機能や各セル型専用機能の詳しい内容については、対応するInputManJSコントロールのデモでご確認ください。

セル型に対応したInputManJSコントロール

セル型 コントロール
GcMask型セル マスクコントロール(GcMask)
GcDateTime型セル 日付時刻コントロール(GcDateTime)
GcNumber型セル 数値コントロール(GcNumber)
GcComboBox型セル コンボコントロール(GcComboBox)

参考:コントロールのリンクをクリックすると対応するデモのページが表示されます。

InputManJSセルを使う準備

InputManJSセルを使用するには、InputManJSモジュールに加えて専用の間接モジュールも参照します。

  • gc.inputman-js.ja.js(InputManJSモジュール)
  • gc.inputman-js.css(InputManJSモジュール)
  • gc.spread.sheets.inputmancelltype.js(間接モジュール)

SpreadJSモジュールとこれらのモジュールを参照するには、npmパッケージをインストールします。npmパッケージの利用方法は、こちらの記事を参考にしてください。

本稿では、下記の方法で各モジュールをインポートしています。

// Spread.Sheets関連モジュールのインポート
import * as GCSS from '@grapecity/spread-sheets';
import '@grapecity/spread-sheets-resources-ja';
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white';
// InputManJS関連モジュールのインポート
import '@grapecity/inputman/CSS/gc.inputman-js.css';
import * as GCIMCellType from '@grapecity/spread-sheets-inputmancelltype';

2. GcMask型セル

GcMask型セル

GcMask型セルは、電話番号や郵便番号などの入力マスクを正規表現で定義して、入力可能な文字種と書式を制限することができます。
また、特殊な用途向けとして、書式に設定した列挙体の項目を順次表示するスピン機能も備えられています。

主な機能

GcMask型セルには次のような機能があります。

プロパティ 設定値 機能
formatPattern String 入力マスクの書式
displayType Boolean セルの値にリテラル文字列を含めるかどうかの指定
autoConvert Boolean formatPatternで指定した文字種への自動変換
showSpinButton Boolean スピンボタンの表示
watermarkNullText String 未入力時の代替テキストを設定
exitOnLastChar Boolean 入力完了時の自動フォーカス移動

詳細情報:SpreadJSデモInputManJSヘルプInputManJSデモ

メモ
入力マスクの詳しい仕様をInputManJSデモに記載しています。

サンプルスクリプト

文字種を自動的に半角数字に変換して郵便番号を入力する例を以下に示します。

この例では、表示モードでもリテラル文字が表示されます。また、編集開始時に適切な入力を促す文字列が表示され、文字列全体が選択状態になります。

function setGcMaskCellType(sheet){
var gcMaskCellType = new GCIMCellType.GcMaskCellType({
autoConvert: true,
displayType: 'text',
exitOnLastChar: true,
formatPattern: '〒\\D{3}-\\D{4}',
showClearButton: true,
showSpinButon: false,
watermarkNullText: '郵便番号の入力'
});
sheet.setCellType(1, 1, gcMaskCellType);
};

3. GcDateTime型セル

GcComboBox型セル

GcDateTime型セルは、和暦表示や入力可能な日付範囲の指定ができるほか、ドロップダウンカレンダーやスピン機能を使ってマウス操作だけで日付を入力することも可能です。また、ドロップダウンカレンダーには、日曜日や休日のスタイル設定などの豊富な機能が搭載されています。

主な機能

GcDateTime型セルの主要な機能を以下に示します。

プロパティ 設定値 機能
formatPattern String 日付時刻の入力書式
displayType String セルの値に設定する書式(入力書式/セルのフォーマッタ)
showDropDownButton Boolean ドロップダウンボタンの表示
dropDownConfig.dropDownType DateDropDownType ドロップダウンの種類
dropDownConfig.type PickerType 日付時刻ピッカーの種類
showSpinButton Boolean スピンボタンの表示
minDate Date/String 入力可能な日付の最小値
minDate Date/String 入力可能な日付の最大値
watermarkNullText String 未入力時の代替テキストを設定
exitOnLastChar Boolean 入力完了時の自動フォーカス移動

詳細情報:SpreadJSデモInputManJSヘルプInputManJSデモ

メモ
ドロップダウンカレンダーの機能や設定方法はInputManJSデモのドロップダウンカレンダーカレンダーコントロールで解説しています。

サンプルスクリプト

この例では、和暦の日付を入力して表示します。

入力書式がそのまま表示書式としても使用されます。また、編集開始時に適切な入力を促す文字列が表示され、文字列全体が選択状態になります。さらに、入力可能な日付範囲を限定しているほか、ドロップダウンカレンダーを使った日付入力も可能です。

function setGcDateTimeCellType(sheet){
var gcDateTimeCellType = new GCIMCellType.GcDateTimeCellType({
displayType: 'text',
dropDownConfig: {
dropDownType: GC.InputMan.DateDropDownType.Calendar,
showWeekNumber: false,
type: GC.InputMan.PickerType.DateTime,
},
exitOnLastChar: true,
formatPattern: 'gggee年MM月dd日',
maxDate: '2099/12/31',
minDate: '2000/1/1',
showClearButton: true,
showDropDownButton: true,
showSpinButon: false,
watermarkNullText: '和暦日付の入力'
});
sheet.setCellType(3, 1, gcDateTimeCellType);
};

また、CSSに次の記述を追加して今日の日付ボタンのスタイルを設定しています。

.gcim-calendar__today-button{
color: red;
}

4. GcNumber型セル

GcComboBox型セル

GcNumber型セルは、3桁区切りや小数点、通貨記号、負号を入力書式と表示書式に設定できます。また、負号のカスタイズや漢数字の表示も可能です。さらに、ドロップダウン数値パッドとスピン機能を使うことでマウス操作だけで数値を入力することができます。

主な機能

GcNumber型セルの主要な機能は次のとおりです。

プロパティ 設定値 機能
formatDigit String 数値の入力書式(桁数、小数点、桁区切り)
positivePrefix String 正数の前のリテラル文字(通貨記号など)
positiveSuffix String 正数の後のリテラル文字
negativePrefix String 負数の前のリテラル文字(通貨記号や負号)
negativeSuffix String 負数の後のリテラル文字
displayType String 表示書式(入力書式/セルのフォーマッタ)の切り替え
showSpinButton Boolean スピンボタンの表示
spinOnKeys Boolean 上下キーによるスピン動作の許可
spinWrap Boolean スピン時の上下限でのラップ動作の許可
showNumericPad Boolean 数値パッドのドロップダウン表示
minValue Number/String 入力可能な数値の最小値
maxValue Number/String 入力可能な数値の最大値
watermarkNullText String 未入力時の代替テキストを設定

詳細情報:SpreadJSデモInputManJSヘルプInputManJSデモ

サンプルスクリプト

最大5桁の数値を円記号と桁区切り記号を付けて入力/表示する例です。

負数と正数の接頭辞を設定するほか、マウスによる数値入力を可能にする簡易キーパッドの使用を可能にしています。また、スピンボタンを使った数値の増減を許可する一方で、マウスホイールによるスピン操作は禁止しています。

function setGcNumberCellType(sheet){
var gcNumberCellType = new GCIMCellType.GcNumberCellType({
displayType: 'text',
formatDigit: '##,##0',
maxValue: Number(99999),
minValue: Number(-99999),
negativePrefix: '-

5. GcComboBox型セル

GcComboBox型セル
複数列やグラフィカルでリッチなリストを実現するテンプレートを使ったドロップダウンリストを表示できます。また、入力された値に合致する項目を自動的に表示するオートフィルタ機能 を備えているほか、スピン機能を使って選択値を変更したり、任意の文字列を直接入力することも可能です。

主な機能

GcComboBox型セルの主要な機能は次のとおりです。
プロパティ 設定値 機能
items Object ドロップダウンリストのデータソース
columns Object ドロップダウンリストの各列の定義
displayMemberPath String 選択項目の表示用に使用するフィールド名
valueMemberPath String 選択項目の値として使用するフィールド名
isEditable Boolean 任意の文字列入力の可否
autoFilter AutoFilter列挙型 入力時のフィルタリング方法
dropDownHeight Number/String ドロップダウンリストの高さ
dropDownWidth Number/String ドロップダウンリストの幅
itemHeight Number/String ドロップダウンリスト内の項目の高さ
showSpinButton Boolean スピンボタンの表示
watermarkNullText String 未入力時の代替テキストを設定
詳細情報:SpreadJSデモInputManJSヘルプInputManJSデモ

サンプルスクリプト

ドロップダウンリストに2列のデータを表示し、交互行スタイルを設定しています。 ドロップダウンリストにはJSON形式のデータを設定し、オートフィルタ機能を有効にして表示するリスト項目を絞り込めるようにしています。また、ドロップダウンリストのサイズと項目の高さを設定し、列ヘッダを非表示にしています。
function setGcComboBoxCellType(sheet){
var gcComboBoxCellType = new GCIMCellType.GcComboBoxCellType({
items: [
{ id: 15, product: 'ピュアデミグラスソース' },
{ id: 17, product: 'だしこんぶ' },
{ id: 18, product: 'ピリカラタバスコ' },
{ id: 84, product: 'なまわさび' },
{ id: 85, product: 'なまからし' },
{ id: 86, product: 'なましょうが' },
],
columns: [
{ name: 'id', label: 'コード', width: 70 },
{ name: 'product', label: '品名', width: 180 },
],
displayMemberPath: 'product',
valueMemberPath: 'id',
autoFilter: GC.InputMan.AutoFilter.StartWith,
dropDownHeight: 300,
dropDownWidth: 'auto',
generatingItem: (args) => {
args.item.classList.add(args.index % 2 ? 'odd' : 'even');
},
isEditable: true,
itemHeight: 25,
showHeader: false,
showSpinButton: true,
watermarkNullText: '項目を選択してください',
});
sheet.setCellType(7, 1, gcComboBoxCellType);
};

また、CSSに次の記述を追加して交互行のスタイルを設定しています。

.odd {
background: aliceblue;
}
.even {
background: white;
}

6. 実行サンプル

上記のサンプルスクリプトで紹介した各セル型を実装した実行サンプルです。セル型名の横のセルをクリックすると、各種入力をお試しいただけます。

7. おわりに

以上のように、InputManJSセルを使うことでSpreadJSのシートにInputManJSのコントロールの高度な入力機能を付与できます。SpreadJSには、今回ご紹介したInputManJSセルをはじめとする豊富な機能が満載です。また、InputManJSには、その他にも快適なユーザーインタフェースの構築に欠かせない各種コントロールをご用意しています。

弊社ウェブサイトで公開中のオンラインデモでは、これらの製品が提供する様々な機能をお試しいただけるようになっていますので、是非チェックしてみてください。


,
negativeSuffix: '',
positivePrefix: '

5. GcComboBox型セル

GcComboBox型セル

複数列やグラフィカルでリッチなリストを実現するテンプレートを使ったドロップダウンリストを表示できます。また、入力された値に合致する項目を自動的に表示するオートフィルタ機能
を備えているほか、スピン機能を使って選択値を変更したり、任意の文字列を直接入力することも可能です。

主な機能

GcComboBox型セルの主要な機能は次のとおりです。

プロパティ 設定値 機能
items Object ドロップダウンリストのデータソース
columns Object ドロップダウンリストの各列の定義
displayMemberPath String 選択項目の表示用に使用するフィールド名
valueMemberPath String 選択項目の値として使用するフィールド名
isEditable Boolean 任意の文字列入力の可否
autoFilter AutoFilter列挙型 入力時のフィルタリング方法
dropDownHeight Number/String ドロップダウンリストの高さ
dropDownWidth Number/String ドロップダウンリストの幅
itemHeight Number/String ドロップダウンリスト内の項目の高さ
showSpinButton Boolean スピンボタンの表示
watermarkNullText String 未入力時の代替テキストを設定

詳細情報:SpreadJSデモInputManJSヘルプInputManJSデモ

サンプルスクリプト

ドロップダウンリストに2列のデータを表示し、交互行スタイルを設定しています。

ドロップダウンリストにはJSON形式のデータを設定し、オートフィルタ機能を有効にして表示するリスト項目を絞り込めるようにしています。また、ドロップダウンリストのサイズと項目の高さを設定し、列ヘッダを非表示にしています。


また、CSSに次の記述を追加して交互行のスタイルを設定しています。


6. 実行サンプル

上記のサンプルスクリプトで紹介した各セル型を実装した実行サンプルです。セル型名の横のセルをクリックすると、各種入力をお試しいただけます。

7. おわりに

以上のように、InputManJSセルを使うことでSpreadJSのシートにInputManJSのコントロールの高度な入力機能を付与できます。SpreadJSには、今回ご紹介したInputManJSセルをはじめとする豊富な機能が満載です。また、InputManJSには、その他にも快適なユーザーインタフェースの構築に欠かせない各種コントロールをご用意しています。

弊社ウェブサイトで公開中のオンラインデモでは、これらの製品が提供する様々な機能をお試しいただけるようになっていますので、是非チェックしてみてください。


,
positiveSuffix: '',
showClearButton: true,
showNumericPad: true,
showSpinButton: true,
spinWheel:false,
watermarkNullText: '数値の入力'
});
sheet.setCellType(5, 1, gcNumberCellType);
};

5. GcComboBox型セル

GcComboBox型セル

複数列やグラフィカルでリッチなリストを実現するテンプレートを使ったドロップダウンリストを表示できます。また、入力された値に合致する項目を自動的に表示するオートフィルタ機能
を備えているほか、スピン機能を使って選択値を変更したり、任意の文字列を直接入力することも可能です。

主な機能

GcComboBox型セルの主要な機能は次のとおりです。

プロパティ 設定値 機能
items Object ドロップダウンリストのデータソース
columns Object ドロップダウンリストの各列の定義
displayMemberPath String 選択項目の表示用に使用するフィールド名
valueMemberPath String 選択項目の値として使用するフィールド名
isEditable Boolean 任意の文字列入力の可否
autoFilter AutoFilter列挙型 入力時のフィルタリング方法
dropDownHeight Number/String ドロップダウンリストの高さ
dropDownWidth Number/String ドロップダウンリストの幅
itemHeight Number/String ドロップダウンリスト内の項目の高さ
showSpinButton Boolean スピンボタンの表示
watermarkNullText String 未入力時の代替テキストを設定

詳細情報:SpreadJSデモInputManJSヘルプInputManJSデモ

サンプルスクリプト

ドロップダウンリストに2列のデータを表示し、交互行スタイルを設定しています。

ドロップダウンリストにはJSON形式のデータを設定し、オートフィルタ機能を有効にして表示するリスト項目を絞り込めるようにしています。また、ドロップダウンリストのサイズと項目の高さを設定し、列ヘッダを非表示にしています。


また、CSSに次の記述を追加して交互行のスタイルを設定しています。


6. 実行サンプル

上記のサンプルスクリプトで紹介した各セル型を実装した実行サンプルです。セル型名の横のセルをクリックすると、各種入力をお試しいただけます。

7. おわりに

以上のように、InputManJSセルを使うことでSpreadJSのシートにInputManJSのコントロールの高度な入力機能を付与できます。SpreadJSには、今回ご紹介したInputManJSセルをはじめとする豊富な機能が満載です。また、InputManJSには、その他にも快適なユーザーインタフェースの構築に欠かせない各種コントロールをご用意しています。

弊社ウェブサイトで公開中のオンラインデモでは、これらの製品が提供する様々な機能をお試しいただけるようになっていますので、是非チェックしてみてください。