1.21 jigowatts

Great Scott!

jqGridのボタンを表示する

概要

jqGridのボタンを表示しinlineで編集できるようにします。
f:id:sh_yoshida:20130913043224p:plain

手順

1.HTMLにtableタグとdivタグを用意します。

Pager部分にボタンを表示するので、Pager用にIDを振ります。

<table id="momoclo">
</table>
<div id="pager"></div>
2.JavascriptでjqGridの設定を書きます。

今回はinlineで編集したいため、navGridのeditとaddプロパティはfalseにします。
navButtonAddでオリジナルのボタンも設置します。

$(function () {
    var data = [
        { color: "Green", name: "有安杏果" },
        { color: "Pink", name: "佐々木彩夏" },
        { color: "Red", name: "百田夏菜子" },
        { color: "Yellow", name: "玉井詩織" },
        { color: "purple", name: "高城れに" }
    ];

    $("#momoclo").jqGrid({
        data: data,
        datatype: "local",
        width: 600,
        height: '100%',
        rownumbers: true,
        shrinkToFit: false,
        hidegrid: false,
        pager: "#pager", //pagerを設定
        pgbuttons: false, //pagerのボタン非表示
        pginput: false,
        viewrecords: true,
        colNames: ['色', '名前','誕生日','血液型','出身地','身長'],
        colModel: [
        { 'name': 'color', "width": 80, "editable": true },
        { 'name': 'name', "width": 130, "editable": true },
        { 'name': 'birth', "width": 80, "editable": true },
        { 'name': 'bloodtype', "width": 50, "editable": true, "edittype": "select", "editoptions": { value: "0:A;1:B;2:AB;3:O" }, "title": false },
        { 'name': 'birthplace', "width": 80, "editable": true },
        { 'name': 'height', "width": 50, "editable": true },

        ],
        caption: 'ももクロ'
    });
    $('#momoclo').jqGrid('navGrid', '#pager', { edit: false, add: false, del: true ,search: true});
    //inline編集用ボタンの設定
    $('#momoclo').jqGrid('inlineNav', '#pager', { 
        edit: true,
        editicon: "ui-icon-pencil",
        add: true,
        addicon:"ui-icon-plus",
        save: true,
        saveicon:"ui-icon-disk",
        cancel: true,
        cancelicon: "ui-icon-cancel"
    }
    );
    //オリジナルのボタンの設定
    $("#momoclo").jqGrid('navButtonAdd', "#pager", {
        caption: "",
        buttonicon: "ui-icon-document",
        title: "document",
        onClickButton: function () {
            //ボタンの処理
            var ids = $('#momoclo').jqGrid('getDataIDs');

            var data;
            for (var i = 0; i < ids.length; i++) {
                data = $('#momoclo').jqGrid('getRowData', ids[i]);
                alert(data.color + ':' + data.name);
            }
        }
    });
});

完成

f:id:sh_yoshida:20130913043224p:plain

オリジナルのボタンを押下するとjqGridの内容がアラートで表示されます。
f:id:sh_yoshida:20130915101136p:plain