Sigma Gridプラグイン
Sigma Gridプラグインも、前ページのtable fixed headerプラグインと同様に、データをグリッド形式で表示するプラグインです。このプラグインを使うことで、データのソートやページングなどを簡単に適用させることができます。table fixed headerプラグインは、tableタグで指定したデータの列名設定や、ソーティングの有無などをメソッドのオプションで指定するのに対し、Sigma Gridプラグインはあらかじめ定義した表示フィールド、表示列、データのハッシュをロードし、グリッド形式で表示させます。
プラグイン適用後を図4に示します。
図4 Sigma Gridプラグイン適用後
また、Display5に対してデータのソートを行った場合を図5に、Display5の列幅を変更した場合を図6に示します。
図5 Sigma Gridプラグイン適用後（Display5でソーティング）
図6 Sigma Gridプラグイン適用後（Display5の列幅を変更）
「JQSIGMAGRID」のサイトからjqery-sigma-ajax-grid.zipをダウンロードし、解凍後にpluginフォルダ下に配置します。
リスト2にSigma Gridプラグインの使用例を示します。
リスト2 Sigma Gridプラグインの使用例（jQueryPlugin_grid.html）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
(中略）
<!--1.jQueryの読み込み-->
<script type="text/javascript" <script type="text/javascript" src="Scripts/jquery-1.6.1.min.js"></script>
<!--2.プラグインの読み込み-->
<script type="text/javascript" src="plugins/jqery-sigma-ajax-grid/grid/gt_msg_en.js"></script>
<script type="text/javascript" src="plugins/jqery-sigma-ajax-grid/grid/gt_grid_all.js"></script>
<!--3.CSSの設定-->
<link rel="stylesheet" type="text/css" href="plugins/jqery-sigma-ajax-grid/grid/gt_grid.css" />
<!--4.プラグインの設定-->
<script type="text/javascript" >
$(function () {
var data1 = [
{ Column1: "010-0", Column2: "AAA", Column3: "Mnop", Column4: "Efgh", Column5: 50, Column6: 57, Column7: 80, Column8: 46, Column9: "2008-08-08" , Column10: 1.1},
(中略）
];
var dsOption= {
fields :[
{ name: 'Column1' },
{ name: 'Column2' },
(中略）
{ name: 'Column8', type: 'float' },
{ name: 'Column9', type: 'date' },
{ name: 'Column10', type: 'float' },
],
recordType : 'object',
data: data1
}
var colsOption = [
{id: 'Column1', header: " Display1", width: 60 },
(中略）
{ id: 'Column10', header: "Display10", width: 70 }
];
var gridOption={
id : "grid1",
container : 'grid1_container',
dataset : dsOption ,
columns : colsOption
};
$('#grid1').sigmaGrid(gridOption);
});
</script>
</head>
<body>
<h1>jQueryプラグイン（Sigma Grid) サンプル</h1>
<div id="grid1_container" style="width:700px;height:300px">
</div>
</body>
</html>
Sigma Gridプラグインを使用するには、gt_msg_en.js、gt_grid_all.jsを読み込み、CSSを指定し、「4.プラグインの設定」のように、表示フィールドの定義（dsOption)、表示列の定義（colsOption）、データ定義（data1）を指定し、表示領域のid属性を指定したgridOptionをSigma.Gridメソッドに設定し、ロードします。
また、gridOptionの形式を表3に示します。
表3 gridOptionの形式
| オプション名 | 概要 |
| id | グリッドid |
| container | グリッドを表示するコンテナー名 |
| dataset | データセット |
| columns | カラムのオプション |
次に、表3のdatasetで指定するdsOptionの形式を表4に、columnsで指定するcolsOptionを表5に示します。
表4 dsOptionの形式
| オプション名 | 概要 |
| fields | フィールド定義を指定する（name：カラム名、type：型（string,int,float）。デフォルトはstring） |
| recordType | レコードのタイプ（object、array） |
| data | 表示するデータ |
表5 colsOptionの形式
| オプション名 | 概要 |
| id | カラムid |
| header | ヘッダー名称 |
| width | カラム幅 |
