タグ: jqGrid

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");
    });
});
広告

jqGrid(jQuery Grid Plugin)でstypeをselectに設定し、searchoptionsのdataUrlでselectデータを取得できない時の対処方法

jqGridの検索でstypeをselectにし、selectのデータをdataUrl経由で取得するように設定した際、これだけだとdataUrlで設定したURLにGETでアクセスがいかない。

解決するためには、ajaxSelectOptionsプロパティを設定する。

$("#jqgrid_table").jqGrid({
  ajaxSelectOptions: {type: "GET"},
  colNames : ['ほげ'],
  colModel : [{
    name : 'hoge',
    index : 'hoge',
    stype: 'select',
    searchoptions: {
      dataUrl: '/data/hoges'
    }
  }
}

参考URL:
jquery – jqGrid: dataUrl in searchoptions not working with jqGrid4.4.5 – Stack Overflow