JavaScript/Wijmo

Wijmoのカスタムエディタでデータ入力を効率化する

by MESCIUS-dev

2020年8月19日にJavaScriptライブラリ「Wijmo（ウィジモ）」の最新バージョン「2020J v2」をリリースしました。

今回はこの「2020J v2」で追加された機能の中から、データグリッドコントロール「FlexGrid（フレックスグリッド）」の「カスタムエディタ」を使用して、セルのデータ入力を効率化する方法を紹介します。

デフォルトのデータ入力

FlexGridにはMicrosoft Excelのようなセルのデータ入力機能が実装されています。まずはFlexGridに備わっている標準の入力機能をふりかえってみましょう。

1. クイック編集

エンドユーザーは、任意のセルを選択して入力を開始するだけで簡単にデータを編集できます。

これは「クイック編集」モードと呼ばれます。このモードでは、カーソルキーを押すと編集を終了してセルの選択を移動します。

2. 完全編集

F2キーを押すか、セルをダブルクリックして入力を開始する機能です。

こちらは「完全編集」モードと呼ばれます。このモードでは、カーソルキーを押すとエディタ内でキャレットが移動され、編集を終了するためにはEnter、Tab、Escキーいずれかをクリックする必要があります。

「クリック編集」と「完全編集」のどちらのモードでも、入力されたデータをFlexGridが自動的に解析し、それをセルの適切なデータ型に変換します。変換が失敗した場合は元の値が復元されます。

データに合わせた入力方法（カスタムエディタ）

日付や時刻、固定の増分を持つ数値、県名や市町村名などリストで保持しておける固有名称のテキストなどの入力では、上記の入力方法で一文字ずつ入力していくのはどうしても手間がかかります。そこで登場するのが、これらのデータを効率よく入力するための「カスタムエディタ」です。

このカスタムエディタは以下のように入力したいデータにあわせて、Wijmoの入力コントロールをFlexGridのセルのエディタとして設定できます。

  • 日付入力：InputDateコントロール
  • 時刻入力：InputTimeコントロール
  • 数値入力：InputNumberコントロール
  • テキスト入力：ComboBoxコントロール、AutoCompleteコントロール

実際のコードではColumnクラスcolumnsのeditorプロパティで使用する入力コントロールを設定します。

new FlexGrid('#theGrid', {
:
:
columns: [
{ header: 'ID', binding: 'id', width: 80, isReadOnly: true },
{
header: '日付', binding: 'date', format: 'd',
editor: new InputDate(document.createElement('div'))
},
{
header: '時刻', binding: 'time', format: 't',
editor: new InputTime(document.createElement('div'), {
isEditable: true,
format: 't',
min: '7:00',
max: '22:00',
step: 30
})
},
{
header: '国', binding: 'country',
editor: new ComboBox(document.createElement('div'), {
itemsSource: getCountries()
})
},
{
header: '商品', binding: 'productId',
dataMap: new DataMap(getProducts(), 'id', 'name'),
editor: new AutoComplete(document.createElement('div'), {
itemsSource: getProducts(),
selectedValuePath: 'id',
displayMemberPath: 'name'
})
},
{
header: '金額', binding: 'amount', format: 'n2',
editor: new InputNumber(document.createElement('div'), {
format: 'n2',
step: 10,
min: 0,
max: 1000
})
},
],
:
:
});

このようにデータのフォーマットに合わせてカスタムエディタを利用することで、セルへのデータ入力を効率よく行うことが可能になります。

さいごに

Wijmoの「2020J v2」には今回紹介したカスタムエディタ以外にも様々な新機能追加・機能強化が行われており、その内容はこちらのページで確認することができます。

製品サイトでは、Wijmoの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

＼  この記事をシェアする  ／