2015.04.28

jqGrid

jqGrid グリッド上部に任意に追加する

例えばgridのテーブル名がlist1だった場合、t_list1としてグリッド上部に追加することができます。
今回はチェックボックスON/OFFを行う機能を追加しました。

toolbar: [true, "top"],  // <= プロパティ追加

$("#t_list1").append('<div style="margin-left:12px; display:inline-block;">チェック全て<span class="chklabel" style="margin-left:5px;">ON</span>&nbsp;/&nbsp;<span class="chklabel">OFF</span></div>');

1

後はON/OFFをクリックした際のイベント処理を書いていきます。

$("span", "#t_list1").click(function(){
    chkoff = [];

    if ($(this).text() !== 'ON') {
        var data = $('#list1').jqGrid('getGridParam', 'data');
        $.each(data, function(i,e) {
            chkoff.push(String(e.id));
        });
    }

    $('#list1').trigger("reloadGrid");
});

表示はafterInsertRowで行います。

afterInsertRow: function(rowid, rowdata, rowelem) {
    var a =  chkoff.indexOf(rowid);
    var b = (a === -1) ? true : false;
    $('#list1').setCell(rowid, 'chkBoxCol', b);
}

chkBoxColは以下のような設定です。

name: 'chkBoxCol', index: 'chkBoxCol', width: 30, align: 'center', 
editable: true, edittype: "checkbox", editoptions: {value: "true:false"},
formatter: "checkbox", formatoptions: {disabled: false}