jQuery EasyUIでテーブルを表示する(datagrid)

jQuery Easy UIのdatagridを利用してテーブルを表示する。

• HTMLで表の枠組を定義する

タイトル行を用意する。もちろん、この部分をコードで作成することも可能。ここでは、テーブルのタイトル、サイズ、各種オプションを指定。

<table id="xgpsview02GpsData" class="easyui-datagrid"
    title="GPS Point Data" style="width:700px;height:500px"
    data-options="singleSelect:true , fitColumns:true">
    <thead>
        <tr>
            <th data-options="field:'idx'">idx</th>
            <th data-options="field:'gpsDate'">gpsDate</th>
            <th data-options="field:'gpsTime'">gpsTime</th>
            <th data-options="field:'lon'">lon</th>
            <th data-options="field:'lat'">lat</th>
            <th data-options="field:'speed'">speed</th>
            <th data-options="field:'direction'">direction</th>
            <th data-options="field:'numSat'"># sat</th>
        </tr>
    </thead>
</table>

読み込むデータが固定の場合は、HTMLで指定することができる。

• javascriptでデータをロードする

function showGpsDataTable(){
    $('#xgpsview02GpsData').datagrid({
        data: gGpsData
    });
}

gGpsDataはオブジェクトの配列になっていて、gGpsData[0]['lon'](あるいは gGpsData[0].lon)の値がグリッドの1行目([0])のlon列(“field:’lon’”)に表示される。