■[javascript][jqGrid] 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>
댓글 없음:
댓글 쓰기