jqGridの小技たち2

業務で使っているのですが、毎回忘れるのでメモ。
基本的なことなんですがねぇ。。。

バージョン

• jquery：2.1.1
• jquery-ui：1.11.1
• jqGrid：4.6.0

データをクリアする

あくまでデータのクリアです。

testGrid.js

    $("#list").clearGridData();

ヘッダをいじっている場合は上記では足りないので、一度削除して追加する必要あり。

testGrid.js

    $("#gbox_list").remove();
    $("#list_parent").append('<table id="list" class="scroll"></table>');
    // このあとグリッド作成処理

複数テーブルある場合の表示切替

あまりないかもしれませんが、複数テーブルを同じ表示エリアにボタンで表示を切り替える場合です。

testGrid.js

    // 非表示にする
    $('#list1').hide();
    $('#gbox_list1').hide();

    // 表示する
    $('#list2').show();
    $('#gbox_list2').show();

一度初期化してテーブルを作成するとidがgbox_***の要素として展開されるので、こう指定しないとうまくいきませんでした。

リストの角を丸くする

とてもとても些細なことですが、一応気になる方向けに。

testGrid.js

    gridComplete: function () {
        $('#gview_list>.ui-state-default').addClass('ui-corner-top');
    },

datatype:localの際に正しくソートされない

なんでやねん！という状況になったので。
sortName:***では値が数字の列を指定しているのですが、なぜかstringでソートされているようだった。
例）
正しいソート）1, 2, 4, 6, 10, 16, 26
誤ったソート）1, 10, 2, 26, 4, 6

解決策としては、sortNameで指定している列定義にsorttype: 'int'と指定してあげればOK。

testGrid.js

    { name: 'disp_id', index: 'disp_id', width: 50, align: 'center', hidden: false, sorttype: 'int' }, // 表示ID

localは滅多に使用しないからいろいろあるな。