jqGridをJSONで使うときに設定したい7項目

1. ダウンロードするときは全部入りを選びましょう

　jqGridはダウンロード時に選んだ内容から最適化したコードを作成してくれます。これはとてもありがたいのだけれど、機能が必要になるたびダウンロードするのは面倒じゃない。最初から全部選んじゃいましょ。チェックするのが面倒な時はDemoもおすすめ。

2. mtypeはPOSTにしましょう。

　datatypeがJSONの時にはmtypeはPOSTに設定しましょう。どうしてもGETを使いたかったらJSONの先頭に「while(1);」をいれてね。jqGridが適切に対処してくれます。

'datatype' : 'json',
'mtype'    : 'POST'

3. loadErrorイベントを設定しましょう。

　なにかエラーがあってもずっと「読み込み中」表示になって止まってません？

'loadError' : function (xhr, status, error)
{
    alert(xhr.statusText)
}

と設定するだけでも結構違いますよ。

4. navGrid等を使用して操作するときはerrorTextFormatを設定しましょう。

　エラーメッセージが悪いからって言われたらむっとくるよね。

$('grid').jqGrid("navGrid", "#pager", 
    { edit: true, add: true, del: true, search: true,
      refreshstate: "current"},
    {'errorTextFormat' : function (xhr) {alert(xhr.statusText)}}, // edit
    {'errorTextFormat' : function (xhr) {alert(xhr.statusText)}}, // add
    {}, // delete
    {multipleSearch: true, closeAfterSearch: true} // search
);

/* xhrのプロパティ一覧
status timeout ontimeout responseXML responseBody
onreadystatechange readyState responseText statusText abort
*/

5. 検索とか編集をセレクトボックスでできるようにしましょう。

　一個ずつ設定するのがめんどうだけれど、しょうがないね

var bloodtypes = 'A:A型;B:B型;O:O型;AB:AB型;N:不明'; // 最後注意;は無し

'colModel' : [
{'name':'bloodtype', 'label':'血液型',
    'editable':true, 'edittype':'select',
    'editoptions': { 'value':bloodtypes },
    'search':true, 'stype':'select' ,
    'searchoptions': { 'value':bloodtypes }
}
]

6. 日付は選択できるようにしましょう

　JQueryUI.datepickerの日本語化も忘れずにね。

var datepicker = function(e) {
    setTimeout(function() {
        $(e).datepicker({dateFormat: "yy-mm-dd"});
        $('.ui-datepicker').css({"font-size":"70%"});
    },100);
};

'colModel' : [
{'name':'birthday', 'label':'誕生日',
    'editable':true,
    'editoptions': { 'dataInit': datepicker },
    'editrules': { 'date': true },
    'search':true,
    'searchoptions': { 'dataInit': datepicker }
}
]