こんにちは塚田と申します。
今回はWijmo（ウィジモ）を紹介します。
Wijmo（ウィジモ）はメシウスが販売するWebアプリケーション開発で使われるJavaScriptライブラリです。
データグリッド、チャート、ゲージ、入力、ナビゲーションなどの
Webページを作成する際に必要となる部品を提供するJavaScriptライブラリです。今回はその一部のデータグリッドを紹介します。
※画像は公式HPのサンプルを載せています
URL:https://demo.mescius.jp/wijmo/demos/Grid/Overview/purejs
Gridの表示
つづいてサンプルコード↓
WijmoのGrid(FlexGrid)は
依存ライブラリなしで軽量・高速に動作し、
運用開始後の保守性にも優れたJavaScriptライブラリです。
Columns クラスのbindingプロパティでヘッダーを作成し、
引数にJavaScriptから取得したdataを指定することでFlexGridを表示できます。
Columnsクラスのプロパティ
- isReadOnly = 列or行にあるセルを編集できるかどうかを指定できます。
- allowDragging = 列or行の移動を許可するかどうかを指定できます。
- dataType = 列or行に格納される値の型を取得または設定します。
- visible = 列or行が表示されているかどうかを示す値を設定します。
- getIsRequired = 列or行の値が必須かどうかを決定する値を取得します。
- etc...
全45種のプロパティが存在します。
チェックボックス
Selectorクラスを使用すると、チェックボックスで行を選択することができます。
全チェックボックスの活性/非活性の切り替えも可能です。
Selectorクラスを使うことで、データ操作がより直感的かつ効率的に行えるようになり、ユーザインターフェースの柔軟性が向上します。
ソート機能
ColumnsクラスのプロパティであるallowSortingをTrueにすることで
ヘッダー押下時にソートが可能になります。
以下は"日付"ヘッダー押下時にソートをかけた例です。↓
つづいてサンプルコード↓
おわりに
今回紹介したものは一部であり、他にも様々な機能や活用方法があります。
Wijmoの公式ページには実用例と使用例の詳細が記載されているので、
是非、そちらをご参照ください。
以上、塚田でした。