Sigma Grid

基本的な使い方はリリース物に含まれているデモ(demosフォルダ以下）やAPIマニュアル（docsフォルダ以下）を参照するのが良いでしょう。
ここではデモやAPIマニュアルの記述間違いを訂正し初心者の方でも分かるように記載をしていきます。

Gridを配置する

Gridを表示させたいhtmlソース中に<div>タグをSigma Grid用に配置します。
例えば以下のようにです。

---

 <div id="sigmagrid" style="border: 0px solid #cccccc; background-color: #f3f3f3; padding: 5px;

                    height: 200px; width: 700px;"> 

  </div>

---

idは自由に命名して問題ありません。
styleは指定する必要はありませんが、Gridが何らの理由で表示されないときに代替で表示されるものですので指定しておくと良いでしょう。その際はGridと同じ大きさ(height、width）を指定しておくとレイアウトが崩れないので合わせておくことをお奨めします。

モジュールを追加する

htmlソース中にSigma Gridのモジュールへのリンクを追加します。
「インストール方法」でも記載したように最低限のリンクは以下の３つです。

---

<script type="text/javascript" src="/grid/gt_grid_all.js"></script>
<script type="text/javascript" src="/grid/gt_msg_en.js"></script>
<link rel="stylesheet" type="text/css" href="/grid/gt_grid.css" />

---

１つ目の「gt_grid_all.js」はSigma Gridの本体です。
（ソースは複数ファイルに分割されていますが実行用は１つにまとめられ且つ最適化がされています。）
２つ目の「gt_msg_en.js」はメッセージファイルです。このままですと英語ですので後述する「メッセージを日本語化する」を参照し、ファイルを変更した方がよいかと思います。
３つ目の「gt_grid.css」はスタイルシートです。デフォルトのスタイルシートですのでスタイルを別のものに変更する場合は後述する「スタイルを変更する」を参照してください。

Grid用のデータを用意する

Sigma Gridでデータを表示するにはJSON形式のデータを利用します。
(JSON形式についてはリンクを参照ください : http://json.org/json-ja.html )
http://json.org/json-ja.html一番簡単な方法はJS中に配列で用意することです。

---

var __GRID_DATA__=

[

    ["一郎","89","100","70",'75'],

    ["花子","91","95","85",'34']

];

---

この例では５×２の２次元配列を用意しています。
（Gridの表と同じ配列データを用意します。）
実際のアプリケーションではサーバからデータを取得するケースがほとんどかと思いますがモックアップとしてイメージを掴むには利用できる方法です。
サーバからのデータ取得は後述する「サーバからのデータ取得」を参照してください。

Grid生成のJSを作成する

Gridの生成はJSでいくつかの設定とともに行います。

• ＩＤ用の変数宣言
  
• データソースの設定
  
• カラムの設定
  
• グリッドの設定
  
• Gridのインスタンス化

１つ１つ見てみましょう。
ＩＤ用の変数宣言'''

---

var grid_id = "myGrid1" ;

---

GridのIDを識別するための変数宣言です。命名は自由にしてもらって問題ありません。
「グリッドの設定」で利用しますが「グリッドの設定」のIDをリテラルでそのまま書く分には特に宣言する必要はありません。
データソースの設定'''

---

var dsOption= {

	fields :[

		{name : 'student'  },

		{name : 'kokugo'  },

		{name : 'sansu'  },

		{name : 'rika'  },

		{name : 'shakai'  },

	],

	recordType : 'array',

	data : __GRID_DATA__

}

---

Gridに表示するデータソースの設定を行います。
「Grid用のデータを用意する」で作成したデータとのマッチングを行います。
「fields」にはデータのフィールド名を「name」属性として設定します。
「recordType」はデータソースが配列であることを宣言します。
「data」属性にマッチングするデータソース（この場合にはJSの配列）を設定します。
カラムの設定'''
Gridのカラムに関する詳細な設定を行います。
Sigma Gridはカラムに対していろいろな設定が行えますが最低限必要な設定は「id」です。

---

id - カラムの識別子。データソースの「name」と同じものを指定します。

---

「id」以外はオプショナルですが通常「header」「width」程度は指定いたします。

---

header - カラムのヘッダ文字列
width - カラム幅

---

以上、３つを指定するカラムの設定例は以下のようになります。

---

var colsOption = [

   {id:'student' ,header:'生徒',width:100},

   {id:'kokugo' ,header:'国語',width:50},

   {id:'sansu' ,header:'算数',width:50},

   {id:'rika' ,header:'理科',width:50},

   {id:'shakai' ,header:'社会',width:50}

];

---

グリッドの設定'''

---

var gridOption={

   id : grid_id ,

   width:'700',

   height:'200',

   container : 'sigmagrid',

   replaceContainer : true,

   dataset : dsOption ,

   columns : colsOption,

   skin : 'default'

};

---

id - Gridの識別子です。「ＩＤ用の変数宣言」の変数を指定します。（ＩＤ用の変数を宣言せずリテラルで書いても問題ありません。）
width - Gridの幅(html中に埋め込んだdivタグと同じ幅を指定するのが良いと思います。）
height - Gridの高さ(html中に埋め込んだdivタグと同じ高さを指定するのが良いと思います。）
container - html中に埋め込んだdivタグのid
replaceContainer - html中に埋め込んだdivタグをGridに置き換えます。「true」または「false」を指定します。通常は置き換えるので「true」を指定してください。
dataset - 「データソースの設定」の変数を指定します。
columns - 「カラムの設定」の変数を指定します。
skin - Gridの概観を特徴付けるスキンを指定します。
Gridのインスタンス化'''

---

var mygrid=new Sigma.Grid( gridOption );
Sigma.Util.onLoad( Sigma.Grid.render(mygrid) );

---

シグマグリッドのインスタンスを「グリッドの指定」を引数に生成します。
生成したインスタンスを画面のロード時に描画されるようにします。
以上でhtml中にGridが表示されるようになりました。

メッセージを日本語化する

メッセージのスクリプトファイル「gt_msg_en.js」をコピーします。
ファイル名は何でもよいですが分かりやすく「gt_msg_jp.js」としましょう。
エディタでコピーした「gt_msg_jp.js」を開き、英語のメッセージ部分を日本語にしていきます。
例えば
WAITING_MSG : 'Please wait...',
↓
WAITING_MSG : 'しばらくお待ちください...',
という風にお好きな日本語に変更してください。
変更したものを保存してページをリロードすれば次回からメッセージは日本語になっているでしょう。

スタイルを変更する

デフォルトのスタイルシート以外に3種類のスタイルシートが用意されています。
デフォルト以外のスタイルシートにする場合には該当のスタイルシートのリンクをhtmlに追加し、
「グリッドの設定」で設定した「skin」の値を変更します。
Vistaスタイル'''

Macスタイル'''

Pink(Chaina)スタイル'''
※Sigma Gridの2.2では「skin/china/skinstyle.css」「skin : 'china'」

カラムのオプション設定

Sigma Gridは単なるHTMLのTableタグと比べて豊富なカラムの設定をオプションとして用意しています。
ソート'''
デフォルトでソート可能なカラムになります。
ソート可能を不可にするには「sortable」オプションで「false」を指定します。

---

//例：
{id:'student',header:'生徒',width:100,sortable:false}

---

リサイズ'''
デフォルトでリサイズ可能なカラムになります。
リサイズ可能を不可にするには「resizable」オプションで「false」を指定します。

---

//例：
{id:'student',header:'生徒',width:100,resizable:false}

---

位置'''
表示位置のデフォルトは左寄せです。
中央揃えや右寄せにするには「align」オプションで指定します。
左よせ - left
中央揃え - center
右寄せ - right

---

//例：
{id:'kokugo' ,header:'国語',width:50,align:'right'}

---

「align」はデータの位置ですが、ヘッダ行の位置は「headAlign」オプションで同様に変更できます。

---

//例：
{id:'kokugo' ,header:'国語',width:50,align:'right',headAlign:'right'}

---

カラム固定'''
列が多くなると水平スクロールバーが出て右端の列がスクロールしないと表示できなくなります。
当然ながらスクロールすると代わりに左端のカラムが見えなくなってしまいます。
ヘッダ行のようにカラムをスクロールさせたくない場合、「frozen」オプションを設定します。

---

//例：
{id:'student' ,header:'生徒',width:100,frozen:true}

---

その他オプション'''

• emptyText - 表示データがnullの場合に代わりに表示する文字列。
  
• hidden - カラムを非表示にする。
  
• minWidth - カラムがリサイズ可能であったときの最小幅。

サーバからのデータ取得

「Gridの設定」に「loadURL」オプションを追加します。
「loadURL」の指定内容はデータ取得先のＵＲＬです。
先に「Grid用のデータを用意する」で示した例ではデータをJSの配列として予め用意しました。
サーバから取得する場合にはこのJSの配列は不要です。
同じく「データソースの設定」での「data」属性は不要になりますので除外します。
その代わり「loadURL」で設定したＵＲＬからJSON型のデータを取得します。
サーバからのデータ取得では一旦Gridの描画しつつ、非同期にAJAX通信でデータを取得します。
サーバサイドではSigma Gridからのリクエストに応じてJSON型のデータを返すようにしてください。
（javaやPHP、C#など動的にデータを生成してレスポンスを返してください。）

入力フィールドを作成する

Gridは表示だけではなく入力可能なフィールドを作成することができます。
カラムのオプションに「editor」を付けます。
作成できる入力形式は「text」「textarea」「date」「select」です。
また、チェックボックスを行に付けるには「isCheckColumn」を設定します。
text
一般的なテキスト入力です。
「type」属性を「text」とします。

---

 //「生徒」カラムをテキスト入力できるようにする

 {id:'student' ,header:"生徒",width:100,frozen:true,

      editor: {type:"text"}

 },

---

textarea
複数行入力可能なテキストエリアです。
「type」属性を「textarea」とし、テキストエリアの大きさを「width」「height」で指定します。

---

//「備考」カラムをテキストエリアにする

{id:'biko',header:"備考",width:170,resizable:false,

    editor: {type:"textarea",width:'170px',height:'100px'

}

---

date
日付入力です。
type」属性を「date」とします。

---

//「誕生日」カラムを日付入力にする

{id:'birthday' ,header:"誕生日",width:100,resizable:false,

     editor: {type:"date"}

},

---

日付入力は直接入力以外に便利な「Date Picker」を利用できます。
「Date Picker」を利用可能にするには「インストール方法」で説明したように別途「Date Picker」のJS及びCSSを配置する必要があります。

---

<!-- Calendar -->
<link rel="stylesheet" type="text/css" media="all" href="/grid/calendar/calendar-blue.css" />
<script type="text/javascript" src="/grid/calendar/calendar.js"></script>
<script type="text/javascript" src="/grid/calendar/calendar-jp.js"></script>
<script type="text/javascript" src="/grid/calendar/calendar-setup.js"></script>

---

尚、配置は「Sigma Grid」のJSより前に配置をしてください。

select
選択入力（select)です。
「type」属性を「select」とし、「options」属性に選択リストを{値：表示名称}で設定します。

---

//「得意科目」を選択形式にする

{id:'tokuikamoku',header:"得意科目",width:100,resizable:false,

     editor: {type:"select",

     options: {'国語':'国語','算数':'算数','理科':'理科','社会':'社会','体育':'体育'}}

},

---

尚、マニュアルには「defaultText」属性（selectのデフォルト値）を設定できるとありますが、実際には機能しません。選択項目の一番最初の項目（例で言うと「国語」）がデフォルトになるように実装されています。

チェックボックス'''
カラムオプションに「isCheckColumn」を付け、値をtrueにすると行にチェックボックスが付きます。

---

{id:'chk' ,header:"□",width:50,headAlign:"",frozen:true,isCheckColumn:true},

---

尚、チェックボックスは１つのみしか機能しないようです。

入力規則

入力フィールドには入力規則を設定することができます。
入力規則には「validRule」と「validator」の２つがあります。
「validRule」は定型的な必須チェックと簡単な型チェックのみをサポートし、以下の４種類のうち１つまたは組み合わせで指定します。
'R' - Required(必須チェック）
'N' - Number（数値型チェック）
'E' - Email（eMail形式チェック）
'F' - Float（浮動小数点型チェック）

---

//「生徒」カラムを必須入力にする

{id:'student',header:"生徒",width:100,frozen:true,

              editor: {type:"text"},validRule:['R']

},

---

「validator」は自由に入力規則を作成できるようになっており、function内に独自のチェックルーチンを記述します。
(「validRule」だけではチェック内容が乏しいので実質的には「validator」にて実装する必要があるでしょう。)
「validator」には４つの引数が与えられます。
value - 入力値
record - 入力行データ（レコード）
colObj - カラムオブジェクト
grid - グリッドオブジェクト

---

//「身長」カラムに入力規則を設定

{id:'sincyo' ,header:"身長",width:50,align:"right",sortable:false,resizable:false,

   editor: {type:"text",

            validator : function(value,record,colObj,grid){ 

                    value=Number(value);

                    if ( !isNaN(value) && ( value>0 ) ) {

                        return true;

                    }

                    return "0以上で入力してください";

                }}},

---

表示のカスタマイズ

セルの表示を独自に設定したい場合には「renderer」を設定します。
「renderer」を設定するにはまず「renderer」用のファンクションを作成します。
例としてセルの値を利用してイメージファイルを表示するファンクションを作成してみます。

---

function renderer_i(value,record,columnObj,grid,colNo,rowNo){

        var retval = "<img src='"

                   + value

                   + "'>";

        return retval;

    }

---

見て分かるように「renderer」のファンクション内では表示に利用するhtmlを生成しhtmlを返すようにします。
「renderer」のファンクションには決められた５つの引数が与えられます。

次に「renderer」を適用するカラムにオプションを指定します。
（「renderer」オプションとして作成したファンクションを指定します。）

例えば「アイコン」列の表示をイメージファイルにする場合、

---

{id:'pic' ,header:"アイコン",width:70,renderer:renderer_i},

---

と設定すると上記のような表示が下記のように「renderer」にてイメージ表示に置き換わりました。

ツールバー

ツールバーはグリッドの下部（もしくは上部）に操作用のアイコンを配置することができます。
ツールバーはグリッドの設定で指定します。
toolbarContent
ツールバーで配置するアイコンを指定します。
指定には以下の文字列の組み合わせ（「|」でつなぎます。）を指定します。

• nav : ページ移動（前ページ、次ページアイコン）
  
• goto : ページ移動（ページ番号指定）
  
• reload : 再描画
  
• add del save : 行追加、行削除、保存
  
• print : 印刷
  
• pagesize : １ページのサイズを変更するリストボックス
  
• filter chart : フィルター、チャート表示
  
• state : グリッドの情報表示
  

---

//ページ移動、再描画、行追加、行削除、保存、印刷 アイコン
toolbarContent : 'nav | goto | reload | add del save | print',

---

toolbarPosition
ツールバーの位置。「top」（上部）「bottom」（下部）を指定します。
pageSizeList
１ページのサイズを変更するリストボックスの値。
配列で指定します。

---

pageSizeList : [5,10]

---

「toolBarContent」で「pagesize」を指定しないと意味をなしませんので必ずセットで指定してください。