読者です 読者をやめる 読者になる 読者になる

1.21 jigowatts

Great Scott!

jqGridにdatepickerを表示する

概要

jqGridの行追加、編集時にアイコンを表示しdatepickerを表示します。
datepikerは年と月単位で変更できるようにします。
f:id:sh_yoshida:20130915005357p:plain

用意するもの

  • 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"); //アイコンを表示用のクラス追加
}
4.datepicker用のアイコンとCSSをプロジェクトに追加します。

f:id:sh_yoshida:20130915004456p:plain


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>

完成

f:id:sh_yoshida:20130915005357p:plain