jqGridにdatepickerを表示する
概要
jqGridの行追加、編集時にアイコンを表示しdatepickerを表示します。
datepikerは年と月単位で変更できるようにします。
用意するもの
- datepicker用のアイコン
手順
1.javascriptでjqGridの設定を書きます。
誕生日項目にdatepickerを表示します。
$("#momoclo").jqGrid({ data: data, datatype: "local", width: 600, height: '100%', rownumbers: true, shrinkToFit: false, hidegrid: false, pager: "#pager", pgbuttons: false, pginput: false, viewrecords: true, colNames: ['色', '名前', '誕生日', '血液型', '出身地', '身長'], colModel: [ { 'name': 'color', 'width': 80, 'editable': true }, { 'name': 'name', 'width': 130, 'editable': true }, //datepickerを表示する { 'name': 'birth', 'width': 90, 'editable': true, 'datefmt': "yyyy/mm/dd", //フォーマット editrules: { date: true }, //日付フォーマットチェック 'title': false }, { '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': false }, { 'name': 'height', 'width': 50, 'editable': false } ], caption: 'ももクロ' });
2.追加・編集時にdatepickerを表示させます。
$('#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", editParams: { oneditfunc: onEdit }, //選択行の編集時 addParams: { addRowParams: { oneditfunc: onEdit} } //行追加時 });
3.datepickerを表示する処理を書きます。
datepikerの設定を行います。
アイコンを表示するためにクラスを追加します。
function onEdit(id) { $("#" + id + "_birth").datepicker({ changeMonth: true, changeYear: true, dateFormat: 'yy/mm/dd', yearRange: '1970:2100' }) .addClass("grid-datepicker"); //アイコンを表示用のクラス追加 }
5.CSSを書きます。
datepicker用のアイコンをCSSで設定します。
input.grid-datepicker { border: 1px solid #CFCFCF; background: #fff url(img/cal.png) right no-repeat; }
6.HTMLでCSSを読み込みます。
<head runat="server"> <link rel="stylesheet" href="/CSS/MyStyle.css" type="text/css" /> ・・・ </head>
完成