タグ: javascript
jqGridでページ表示時にはデータをロードせず、何かのイベントでロードをしたいとき
jqGridでたとえば、
<body> <table id="list"><tr><td></td></tr></table> <button type="button" id="btnLoad">Load</button> </body>
$(function() { $("#list").jqGrid({ url: "example.php", datatype: "json", mtype: "GET", : : : }); });
のように記述すると、デフォルトでは、ページを表示した際に、example.phpへのリクエストが発生し、読み込まれたデータがグリッドに表示される。
これをLoadボタン押下時にexample.phpへリクエストし、結果を表示したい場合、
jquery – jqGrid – how to set grid to NOT load any data initially? – Stack Overflow
より、datatypeを’local’に設定し、読み込みたいタイミングで、setGridParam()でdatatypeを本来の設定に戻し、reloadGrid()でグリッドをリロードさせることで、リクエストを発生させる。
$(function() { $("#list").jqGrid({ url: "example.php", datatype: "local", mtype: "GET", : : : }); $("#btnLoad").on("click", function() { $("#list").jqGrid("setGridParam",{datatype:"json"}).trigger("reloadGrid"); }); });
setGridParamにpostDataやurlを加えることで、状態に応じた、追加パラメータの変更やURLの変更も可能
$(function() { $("#list").jqGrid({ url: "example.php", datatype: "local", mtype: "GET", : : : }); $("#btnLoad").on("click", function() { var date = new Date(); $("#list").jqGrid("setGridParam",{ datatype:"json", postData: { dt: date.getTime() } }).trigger("reloadGrid"); }); });