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;
デモ
以下のポイントを押さえつつ、デモを見て頂ければと思います。