jsonフォーマットを配列からオブジェクトに変更する

json を取得してグリッドに表示するサンプルで使用した jsonフォーマットはちょっと使いにくい。
表示するカラムの順番通りに配置しないといけないし、もしデータが少ないとエラーが発生する。
そこで、カラム名と対応させるようなjsonフォーマットで受け取った方が何かと便利。
まぁごちゃごちゃ言うよりは、サンプルを見せた方が早い。

test3.json


{
total : 2,
page : 1,
records : 15,
rows :
[
{employee_id:"0101", employee_no:"0001", name:"name0001"},
{employee_id:"0102", employee_no:"0002", name:"name0002"},
{employee_id:"0103", employee_no:"0003", name:"name0003"},
{employee_id:"0104", employee_no:"0004", name:"name0004"},
{employee_id:"0105", employee_no:"0005", name:"name0005"},
{employee_id:"0106", employee_no:"0006", name:"name0006"},
{employee_id:"0107", employee_no:"0007", name:"name0007"},
{employee_id:"0108", employee_no:"0008", name:"name0008"},
{employee_id:"0109", employee_no:"0009", name:"name0009"},
{employee_id:"0110", employee_no:"0010", name:"name0010"},
{employee_id:"0111", employee_no:"0011", name:"name0011"},
{employee_id:"0112", employee_no:"0012", name:"name0012"},
{employee_id:"0113", employee_no:"0013", name:"name0013"},
{employee_id:"0114", employee_no:"0014", name:"name0014"},
{employee_id:"0115", employee_no:"0015", name:"name0015"},
]
}

このフォーマットを利用するソース

注意点は「jsonReader」パラメータで、想定するjsonファイルフォーマットをオブジェクトの配列と指定する(repeatitems: false)ことです。

この例では、それに加えて、データベースの主キーに相当する「ID」を jqGrid の内部的に使用する行IDとして利用する設定もしています。(id : "employee_id")

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsonファイル読み込みサンプル</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/i18n/grid.locale-jp.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>

<script type="text/javascript">//<![CDATA[
jQuery(document).ready(function()
{
	$("#list").jqGrid({
		datatype   :"local",
		jsonReader :{
				repeatitems: false,			// オブジェクトの配列をデータとして受け取る
				id         : "employee_id"	// ID列名の指定
		},
		colNames   :['従業員番号', '名前'],
		colModel   :[
				{name:'employee_no'},
				{name:'name'       },
		],
		rownumbers : true,
		caption    : 'jsonファイルにアクセスしてグリッド表示する'
	});

	$("#read_json").click( function(e)
	{
		// 指定されたJSON url を取得
		var json_url = $("#json_url").val();

		// jqGridに指定するオプション
		var opts = { url     : json_url,
		             datatype: "json"  };

		$("#list").setGridParam(opts);
		$("#list").clearGridData();
		$("#list").trigger("reloadGrid");
	});

	$("#read_row").click( function()
	{
		// 選択行ID取得
		var id = $("#list").getGridParam("selrow");
		if( id )
		{
			var row = $("#list").getRowData(id);
			alert("id, employee_no, name = " + id + ", " + row.employee_no + ", " + row.name);
		}
	});
});
//]]>
</script>
</head>
<body>

<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<br>

<div>
  <input type="text" id="json_url" value="test3.json" />
  <button id="read_json">JSONファイル読み込み</button>
</div>

<div>
  <button id="read_row">選択行読み込み</button>
</div>

</body>
</html>