JSON文字列を表示するサンプル
前準備
例によって前準備が必要で、こちらからjquery-jsonというjQueryのプラグインをDLして、jsフォルダにコピーしておく。
このプラグインで、配列やらオブジェクトやらを文字列化してくれる。
サンプルはこんなプログラムです。
<!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/jquery.jqGrid.min.js"></script> <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script> <script type="text/javascript" src="js/jquery.json-2.2.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { var mydata = { rows :[ {cell: ["1","test1"]}, {cell: ["2","test2"]}, {cell: ["3","test3"]}, ] }; var json_str = $.toJSON(mydata); var j = jQuery("#list").jqGrid({ datatype: "jsonstring", datastr : json_str, colNames:['従業員番号', '名前'], colModel:[ {name:'employee_no', editable:true}, {name:'name' , editable:true}, ], caption: 'JSON文字列をグリッド化' }); }); </script> </head> <body> <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table> </body> </html>