07.JavaScript, jQuery, ExtJS.../jQuery2014. 4. 23. 09:27

jqGrid 簡単サンプル

반응형


今回は昨年末（2011/12/20）にリリースされたjqGrid4.3.1の新機能を実際に使ってみましょう。
＃というのも、実際使おうとしたらVersion.4台でサンプルプログラム載せている
　ところがほとんどなかったので私にとっての備忘録です。
　今回は最終成果物（DLすればすぐ動かせるもの）もこのページに掲載します。

今回試すのは以下の機能です。

  • 行／列のセルマージ（ColSpanとかRowSpanとかいうアレ）
  • スクロール時のセル固定（Excelで見かけるアレ）

ん〜、にしてもどんどんExcelと同じようなことができるようになってきてますね。
便利になるのはいいとしても、パフォーマンス大丈夫なのかな？
大量データを描画する際に間違いなくパフォーマンス問題を起こしそうな。。。

まぁ、今回はそこには触れずに上記新機能を実装します。

完成イメージ

今回は先に結論と成果物を共有しちゃいます。
jgGrid_sample.zip 直
これをDLしてsample.htmlを開くと、こんな画面が開けます。

スクロールすると、こんな感じにセル固定もします。

ちなみに、これら、デモサイトの作りと異なる作りをしています。
つまり、、、デモサイトの情報はこれから紹介する問題に対応していないんです！！！
古い！！！
早期改修を期待します。

内容解説

Group Header

まずはセルマージのアレを実現します。
これはjQueryメソッド内で以下を呼んであげれば実現完了です。

$("#sample1").jqGrid('setGroupHeaders', {
	useColSpanStyle: true,
	groupHeaders:[
		{startColumnName: 'age', numberOfColumns: 3, titleText: '<em>Details</em>'},
		{startColumnName: 'note1', numberOfColumns: 3, titleText: '<em>Notes</em>'}
	]
});

「useColSpanStyle: true」という指定で縦セル結合の設定。
groupHeadersで横セルのマージを行っています。
なんと簡単なことか！

Frozen Cols

次にセル固定についてです。jqGrid4.3.0から、何と1つの設定とメソッド呼び出しで
機能として実現されます。
＃まずはデモサイト通りの実装です。
colModelの設定で以下を設定します。

frozen:true
/** 例：{name:'name',index:'name',width:150,align:'center',classes:'name_class',frozen:true}, */

次に、jQueryの最後で以下のメソッドを呼び出します。

$("#sample1").jqGrid('setFrozenColumns');
/** #sample1はサンプルのテーブルID */

これだけで実装完了です。これも簡単！

ハマりどころ

[Frozen Cols]そもそもテーブル操作しないとセル固定が中途半端に実現される

上記のとおりjQuery内で最後にメソッド呼び出しをすると、、、こうなります。
（Windows 7 64-bit環境）

忌々しき事態です、まったく使い物になりません。

ちなみにテーブル操作を行って一度でもテーブルをリフレッシュさせると問題は起こりません。。。

色々調べましたが、全く同じ症状の人がいましたね。掲示板にて外人さんが質問しています。
英語のフォーラムなのであまり読んでませんが要約するとこんな感じでしょうか。

＜ユーザ＞
そのままsetFrozenColumnsメソッド使ってもうまく固定されないから
リロードする仕組み入れてるんだけど、リロードってパフォーマンス落ちるよね？
何とかならないの？
＜製作者＞
こっちじゃ確認できないよ、環境悪いんでない？

・・・（こんなやり取りを何度か繰り返す。）

＜製作者＞
確かに問題がありそうだね、こちらでも確認したよ。
＜ユーザ＞
現状はこうやって解消してますわぁ。

gridComplete: function() {
mygrid.jqGrid('setFrozenColumns');
}

なるほど、colModelの属性としてgridCompleteに設定するのね。
これならgrid完成後にセル固定処理が走るから問題なさそうですね。
これで一つ解決。

[Frozen Cols]セル固定状態のフィルタリングで処理がストップする

上記gridCompleteに記述することにすると、次にこの問題にあたります。
セル固定やマージは一度だけ行えばいいのに、gridComplete内に記述すると、
フィルタなどの再描画の際にもさらにマージしようとするから生じるのかな？

いずれにしても、処理がストップしてフィルタリングができません。
一応現在は下記のようにして回避しています。

var isLoaded = false;

・・・

gridComplete: function(){
  if (!isLoaded == true){
    $("#sample1").jqGrid('setGroupHeaders', {
      useColSpanStyle: true,
      groupHeaders:[
        {startColumnName: 'age', numberOfColumns: 3, titleText: '<em>Details</em>'},
        {startColumnName: 'note1', numberOfColumns: 3, titleText: '<em>Notes</em>'}
      ]
    });
    $("#sample1").jqGrid('setFrozenColumns');
    isLoaded = true;
  }
},

一度でもセルマージなどの読み込みを行ったら、その後は行わない、という実装です。
一応今のところこれで問題が発生しなくなっています。
（他の機能との連携を全て試しているわけではないのでどうなるかわかりませんが。。。）

いずれにしても、本体の改修でこの辺の問題がFixされることを期待しています。
jqGridは最近とても短い期間でBugFix版を出しているので、
（4.3.0から4.3.1へのUpdateも10日足らず）すぐに修正されることを願っています。

では、今回はこの辺で。


Posted by 1010

티스토리툴바