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

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

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

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

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

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

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

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

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

２：DOM変更後のテーブルを読み解く

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

まず上下にテーブルが２つずつ。そしてそれぞれの左側に重なるようにテーブルが１つずつできます。このうちスクロールされるのが緑の部分というわけです。
上の二つのテーブルはクラスが”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]

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