jqGridのボタンを表示する
概要
jqGridのボタンを表示しinlineで編集できるようにします。
手順
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); } } }); });
完成
オリジナルのボタンを押下するとjqGridの内容がアラートで表示されます。