HARD DAY'S NIGHT別館

当サイトへお越しいただきありがとうございます。 実務に生かせるような技術・ライブラリを使った簡単なサンプルを公開してゆきます。

jqGrid JSON データ サンプル

このサンプルは表示データの参照元URLを指定して取得して表示します。 サポートしている datatype は xml, json, local があります。

このサンプルでは、JSON を利用してみます。
データの参照元URLは以下のJSONデータを送信してきます。

{
  "total":"1",
  "page":"1",
  "records":"2",
  "rows":[
    {"id":"admin","cell":["admin","管理人","かんりにん","3100","","9",""]},
    {"id":"demo","cell":["demo","デモ","でも","3101","","0",""]}
  ]
}
			

コード


jQuery(document).ready(function()
{
    // ユーザー設定 - ユーザー一覧
    jQuery("#list").jqGrid({
        url:'jqgrid_getdata.php?datatype=json',
        datatype: "json",
        colNames:['ID', '名前', 'フリガナ', '電話番号1', '電話番号2', '役割', '更新日'],
        colModel:[ {index:'id', name:'id', width: '40', align: 'center', editable:true, editoptions:{size:10} },
                   {index:'name', name:'name', width: '110', editable:true, editoptions:{size:20} },
                   {index:'name_furigana', name:'name_furigana', width: '110', editable:true, editoptions:{size:20} },
                   {index:'tel_no1', name:'tel_no1', width: '65', align: 'center', editable:true, editoptions:{size:13} },
                   {index:'tel_no2', name:'tel_no2', width: '65', align: 'center', editable:true, editoptions:{size:13} },
                   {index:'role', name:'role', width: '50', align: 'center', editable:true, edittype:"select", editoptions:{value:"0:スタッフ;9:管理者"}, formatter:'select' },
                   {index:'modified', name:'modified', width: '140', align: 'center', editable:false },
                 ],
        width: 'auto',
        height: 'auto',
        sortname: 'id',
        sortorder: "ASC",
        multiselect: false,
        rowNum:10,
        caption: 'ユーザー一覧'
    });
});
	

HTMLコード


<table id="list">
</table>
	

関連リンク