個人でWebサービス作る人の雑記ブログ

Webサイトを個人で作ってる人が人の役に立ちそうなことを書いていく雑記ブログです

【jqGrid】loadonce:trueでpaginateを動かそうにも、動的にサーバから2回目以降読み込もうにもロードされなくなった話と解決策

いきさつ

jqGridを2つ並べて、

1つ目のグリッドでレコードを選択すると、

それに紐付くデータが2つ目のグリッドに動的に表示される。

そんな機能を実装したんですが、

どうやら2つ目のグリッドでページネーションが動作してないっぽい。

 

どこか設定ミスってるんだろうと高をくくって調べ始めたら、

解決に3時間もかかってしまったのでビボウロクに。

 

 

調査

グリッドの右下を見るに必要な件数はサーバから取れてるっぽい。

f:id:pyamasan:20190320200954p:plain

 

ただページャが機能していない。2ページ目があるはずなのに。

 

ということで軽くググってみると、どうやらサーバから動的にデータを反映させる場合は、

グリッドのオプションにloadonce:trueを指定するべきらしい。

 

$("#cmn-master-tb").jqGrid({
url: '',
loadonce: true, // こんな感じ
datatype : "json",
cellEdit: false,

 

するとどうだろうか!

確かにページャが動作したではありませんか!!!

f:id:pyamasan:20190320201456p:plain

 

しかしさらなる問題が

これで万事解決かと思いきや、

1つ目のグリッドでほかのレコードを選択してデータを見ようにも

2つ目のグリッドで動的に読み込んでくれない。何も音沙汰なし。

ここからが長かった。

 

単刀直入に解決方法

1つ目のグリッドのレコードを選択して、2つ目のグリッドに動的に読み込ませる部分のソースが以下のような感じなんですけれども、

jQuery("#cmn-master-tb").jqGrid('setGridParam',
url:"https://xxx.com/row.cmn_master_grp_code",
page:1
})
.trigger('reloadGrid');

 

これ、明示的に相手のグリッドのdatatypeを指定してあげないとダメみたいなのです。

jQuery("#cmn-master-tb").jqGrid('setGridParam',
url:"https://xxx.com/row.cmn_master_grp_code",
datatype: 'json', //これ
page:1
})
.trigger('reloadGrid');

 

 

いやーこんなんわかんないっすよー笑