表示用のグリッドを用意する
-
右パネルにグリッド(jQuery UI/PropertyGrid)を配置する
左パネルには地図情報を表示したので、GPSデータの情報は右パネル(region=”east”)に表示する。形式は地図と同様、グリッド(jQuery UIのPropertyGrid)を使う。
<div region="east" split="true" title="GPS Info" iconCls="icon-tip" style="width:180px;" collapsed="true"> <table id="gridGpsInfo" class="easyui-propertygrid" fitColumns="true" style="width:180px;height:485px"></table> </div>
パネルは初期状態では閉じておき、GPSファイルを読み込んだタイミングで開くようにする。
グリッドのキー項目を定義する
表示したいキー項目名とをJSONファイルで定義する。あわせてグルーピング情報も記述する。今回は、
・ファイル全体:「開始ポイント」「終了ポイント」の「日時」、「速度」(最高・最低)
・各ポイント:「日時」「経緯度」「速度」「方向」「衛星数」
を表示する。
[ {"name" : "start date" , "value" : "(init)" , "group" : "Start/End"}, {"name" : "start time" , "value" : "(init)" , "group" : "Start/End"}, {"name" : "end date" , "value" : "(init)" , "group" : "Start/End"}, {"name" : "end time" , "value" : "(init)" , "group" : "Start/End"}, {"name" : "# of points" , "value" : "(init)" , "group" : "Points"}, {"name" : "min speed" , "value" : "(init)" , "group" : "Points"}, {"name" : "max speed" , "value" : "(init)" , "group" : "Points"}, {"name" : "index" , "value" : "(init)" , "group" : "Current Point"}, {"name" : "date" , "value" : "(init)" , "group" : "Current Point"}, {"name" : "time" , "value" : "(init)" , "group" : "Current Point"}, {"name" : "longitude" , "value" : "(init)" , "group" : "Current Point"}, {"name" : "latitude" , "value" : "(init)" , "group" : "Current Point"}, {"name" : "speed" , "value" : "(init)" , "group" : "Current Point"}, {"name" : "direction" , "value" : "(init)" , "group" : "Current Point"}, {"name" : "# satellites" , "value" : "(init)" , "group" : "Current Point"} ]
画面ロード時にグリッドを初期化する
function initGridGpsInfo(){ $(gridGpsInfo).propertygrid({ url: 'json/grid_rowname_gpsinfo.json', showGroup: true, scrollbarSize: 0 }); $.getJSON('json/grid_rowname_gpsinfo.json', function(data){ gGridKeyNameGpsInfo = data; }); }