jqGridのsetFrozenColumnsのイベント処理とその後のDOM構造について

javascriptをベースとしてエクセルのような機能を表現できるjqGridで最近では列固定、行固定することができるようです。

そのこと(setFrozenColumns)についてはこちらを参考にさせていただきました。

さて、setFrozenColumnsメソッドを呼ぶとのDOM構造が変わってしまいます。

それによって独自に拡張した部分の挙動がおかしくなりました。
正しく動作させるためにはsetFrozenColumns後に作られたDOMにあわせて拡張する必要があります。

そのためには以下の2つのことが必要ですが、ドキュメントにはなかったのでメモします。
※注意:この記事を書いた時点のバージョンjqGrid4.3.2におけるものであり、今後仕様が変更される可能性が高いです。

1:setFrozenColumnsが完了したというイベントを取る必要がある。

ソースを読むとどうやら、 “jqGridAfterGridComplete.setFrozenColumns”というイベントを発行しているようです。ですので

[javascript]
$grid.jqGrid(‘setFrozenColumns’);
$grid.on(‘jqGridAfterGridComplete.setFrozenColumns’, function(e){//処理})[/javascript]

とすればsetFrozenColumnsの完了イベントを受け取れます。

2:DOM変更後のテーブルを読み解く

DOM変更後は4つのテーブルに分かれます。

まず上下にテーブルが2つずつ。そしてそれぞれの左側に重なるようにテーブルが1つずつできます。このうちスクロールされるのが緑の部分というわけです。
上の二つのテーブルはクラスが”ui-jqgrid-htable’です。下の二つのテーブルには”ui-jqgrid-btable”という名前のクラスがつきます。ですので、

[javascript]hTables = $gird.find(‘table.ui-jqgrid-htable’);
bTables = $grid.find("table.ui-jqgrid-btable’);
$red_table =  $(hTables[0])
$blue_table = $(hTables[1])
$green_table = $(bTables[0])
$yellow_table = $(bTables[1])[/javascript]

とすればそれぞれのテーブルを取得できます。

jqGridのsetFrozenColumnsのイベント処理とその後のDOM構造について」への2件のフィードバック

  1. Hisashi Tanaka

    jqgGidの固定した列でのCSSの変更が出来なくて悩んでましたが、このブログを見せて頂き、出来ました。

    loadCompleteに記述していた、コードを

    $(“#gridid”).on(‘jqGridAfterGridComplete.setFrozenColumns’, function(e) {

    });

    に移動しましたら、解決しました。

    ありがとうございます。

  2. dyo 投稿作成者

    こんなブログでも役に立つことがあるんですね。コメントありがとうございますー。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です