Wijmoでどこでも行追加

Wijmo FlexGrid insert row anywhereJavaScript
Wijmo FlexGrid insert row anywhere

WijmoのFlexGridでは、グリッドの一番下に空行を設ける事ができ、
簡単に新規行を入力できる仕組みがあります。

これはこれで便利なのですが、一番下ではなくて
「任意の場所に行追加したい」という要望もあるかと思います。
少し手を加えるだけで実現可能です。

ObservableArray を使う

公式リファレンスを見ると、「変更に関する通知を送信する配列。」
と書かれています。

ObservableArrayとは

直訳すると「観測可能な配列」
配列の状態変化を監視できる機能を持った拡張オブジェクト

このオブジェクトの使い方は以下のように、collections配下で利用できます。

grid = new wijmo.grid.FlexGrid('#table');
data = [
    {'id': 1},
    {'id': 2},
       :
];
grid.itemsSource = new wijmo.collections.ObservableArray(data);

ObservableArrayのコンストラクタにグリッドへ反映したいデータ配列を引き渡し、
これをグリッドの itemsSource へ設定するだけです。

任意の箇所に行を追加する

行の追加には insert メソッドを使用します。
使用方法は簡単です。

grid.itemsSource.insert(index, item);

これだけです。

では、画面で現在カーソルが当たっている行に挿入したい場合を考えてみましょう。
任意の場所に挿入する為に必要な情報は、場所(index)とデータ(item)ですね。
データは空で良いとして、場所は「カーソルが当たっている行」を指定するので、
これを取得する必要があります。

下記のコードで取得できます。

grid.selection.row;

デモ

以下のポイントを押さえつつ、デモを見て頂ければと思います。

  1. itemsSourceに設定するデータは ObservableArray で渡す
  2. 選択セルのindexを取得する
  3. insertで挿入する
  4. グリッドをリフレッシュする

FlexGrid insert row