Wijmo

Wijmo FlexGridで直感的な行追加を実現する方法を解説し、開発者のUX向上を支援します。

FlexGridFilterの適用は公式ページに記載してある通りとってもカンタンです　たったの1行でフィルターの設定が完了しますlet theGrid = new FlexGrid('#theGrid');let filte...

前回の投稿で行列の固定方法について記載しましたが、今回の記事は列ヘッダの行を増やす方法についてです。きっかけは、行列の固定ではソートによって固定した行が移動してしまったからです。固定とは言え、データの並び替えが効いてしまうようです。それならそもそも列ヘッダに埋め込んでしまえばいい。という発想です。

Excelで良く使う、「ウィンドウ枠の固定」のような動きが実現できます。出力項目が多くなるような表では、主となる特定の行列を常時表示し、その他の属性情報を見えるようにしたい場合があります。

FlexGrid上の任意の行を削除する方法を紹介します。行選択状態でDeleteキーを押下することで削除する方法もありますが、プログラムから行削除を行うケースもあるかと思います。

行コピーを行う方法をサンプル交えて解説

WijmoのFlexGridは簡単に行を追加できる仕組みを持っています。グリッドの一番下に空の行を用意して、入力があれば新規行を生成するという動きが自然にできます。また、行をドラッグ＆ドロップで移動することもできる為、ほとんどの場合、最下行に新規入力欄があれば事足りると思われます。一方で、任意の場所に行を挿入したい場合には今回ご紹介する手法が役に立ちます。

左端の幅を狭くして表の領域を有効活用する方法を書いておきます。