jsonファイル読み込みサンプル

javascript jqGrid

今まではドキュメント内で生成した配列データを表示していましたが、外部にあるjsonファイルを読み込むサンプルです。

用意するJSONファイル

こんなカンジのファイルです。test.json というファイル名で保存します。
UTF-8 で保存します。(このサンプルでは全部asciiコード範囲内なので意識しなくてもいいけど)

{ 
  total: "15", 
  page: "1", 
  records: "15",
  rows :
  [
    {cell:["0001", "name0001"]},
    {cell:["0002", "name0002"]},
    {cell:["0003", "name0003"]},
    {cell:["0004", "name0004"]},
    {cell:["0005", "name0005"]},
    {cell:["0006", "name0006"]},
    {cell:["0007", "name0007"]},
    {cell:["0008", "name0008"]},
    {cell:["0009", "name0009"]},
    {cell:["0010", "name0010"]},
    {cell:["0011", "name0011"]},
    {cell:["0012", "name0012"]},
    {cell:["0013", "name0013"]},
    {cell:["0014", "name0014"]},
    {cell:["0015", "name0015"]},
  ]
}

注意点

jqGridライブラリは色々と不備があって、まず最初は

  • datatype:"local"

としてますけど、実際にjsonファイルを読み込む際には

として読み込みます。こうしないと、ヌルポっぽいことが起きてイヤーンなことが起きます

あと、jsonファイルが全くフォーマットにしたがっていないファイルの場合は何も表示されないので別にいいのですが、ちょっとだけフォーマットがあってるけど、細部で異なる、という場合にやっぱりヌルポが発生して「読み込み中・・・」でずっと止まります。

これは、grid.base.js の $.ajax してるところで、try catch で囲ってやれば回避できます。

あ、それとこのサンプルでは意味も無く(笑)行番号を表示してます。rownumbers: true とすれば勝手に表示してくれます。

<!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",
		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");
	});
});
//]]>
</script>
</head>
<body>

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

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

</body>
</html>