タグ: 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");
    });
});