SigmaGridを使ってみた(その1)
今ゴショゴショやっている案件で、AJAXライブラリは、jQueryを使っておりまして、uiのプラグインはjQuery uiを使っております。グリッドコンポーネントは、”jqGrid”というプラグインがあるのですが、JSONデータを渡す際に、独自のフォーマット(idとcellのHashMapでCellに個々のフィールドを入れる)にしなければいけないようで、「そのままのJSONを使って何とかしてくれて、高機能なGridは何かない?」と思い。jQueryじゃ無いのですど、「もうこれで十分。HTML上でテーブルを表示するなら「Sigma Grid」」というキャッチを見て、使ってみたので、少しメモをしておきます。
Sigma Gridを入手
Sigma Gridの公式サイトから、SigmaGridを入手します。PHP,C#,VB.NET,JSPのサンプルもあるので、そっちもついでに入手します。Sigma Visual GUI Builderという、AjaxコンポーネントのGUIツールもあるようです。(こちらは今回パス)
Sigma Gridを使ってみる
htmlのヘッダー部のインクルードは以下の様な感じです
<!-- 基本 --> <script type="text/javascript" src="./sigmagrid/2.2/grid/gt_grid_all.js"></script> <!-- グリッドの基本CSS --> <link rel="stylesheet" type="text/css" href="./sigmagrid/2.2/grid/gt_grid.css" /> <!-- グリッドのスキン --> <link rel="stylesheet" type="text/css" href="./sigmagrid/2.2/grid/skin/vista/skinstyle.css" /> <link rel="stylesheet" type="text/css" href="./sigmagrid/2.2/grid/skin/mac/skinstyle.css" /> <link rel="stylesheet" type="text/css" href="./sigmagrid/2.2/grid/skin/china/skinstyle.css" /> <!-- メッセージのローケル --> <!-- <script type="text/javascript" src="./sigmagrid/2.2/grid/gt_msg_en.js"></script> --> <script type="text/javascript" src="./sigmagrid/2.2/grid/gt_msg_ja.js"></script> <!-- このページのCSS --> <style type="text/css" media="all">@import "./doc_no_left.css";</style>
スキンが、”vista、china、mac、緑系デフォルト”の3つが用意されいます。メッセージは英語(gt_msg_en.js)と中国語(gt_msg_cn.js)が用意されているので、とりあえずコピペして”ja”を作ります。下の様にメッセージを日本語に変えていきます。
■「gt_msg_ja.js」
Sigma.Msg.Grid.en={ LOCAL : "ja-jp", ENCODING : "UTF-8", NO_DATA : "データなし", GOTOPAGE_BUTTON_TEXT: 'Go to', FILTERCLEAR_TEXT: "全てのフィルタを除去", SORTASC_TEXT : "昇順", SORTDESC_TEXT : "降順", ======= 続く ===================================
カラムやデータ項目の定義はJavaScriptで以下の様にします。
■フィールド定義
// DataSetのフィールド定義 var dsOption= { fields :[ {name : 'ordern' ,type:'int' } ,{name : 'odate' } ,{name : 'ldate' } ,{name : 'sdate' } ,{name : 'custn' } ,{name : 'shipn' } ,{name : 'empln' } ,{name : 'transn'} ], recordType : 'object' //JSON=object , Array=array }
JSONとGridに使うデータ項目の定義をします。
-
- ”name”: 渡すデータのHashMapのキー部分の名前。一般的にはフィールド名だと思います。
- ”type”: データタイプを定義します。(省略がstringでint,date,floatがあるようです。)
- ”recordType”: JSONを使う場合は、object。配列を使う場合は、arrayを設定します。
- ”data”: JavaScript内部のデータを使う場合は、data:変数名とします。外部データの場合は必要ありません。
■グリッドカラムの定義
// カラムの設定 var colsOption = [ {id: 'ordern' , header: "受注No" , width :60 ,frozen:true} ,{id: 'odate' , header: "受注日" , width :70 } ,{id: 'ldate' , header: "納期" , width :70 } ,{id: 'sdate' , header: "出荷日" , width :70 } ,{id: 'custn' , header: "得意先" , width :200 } ,{id: 'shipn' , header: "出荷先" , width :200 } ,{id: 'sstate' , header: "都道府県" , width :60, hidden:true } ,{id: 'sadd1' , header: "住所1" , width :200, hidden:true } ,{id: 'empln' , header: "営業担当" , width :100 } ,{id: 'transn' , header: "運送会社" , width :80 } ];
見れば想像がつきますが、
-
- ”id”: JSONデータとバインドする、先ほどの”name”フィールドの名前。
- ”header”: グリッドの見出し。
- ”width”: 列の幅。
- ”hidden” : 列の表示。true又はfalse。trueとしておくと、後に任意で表示させる事が出来ます。
// オプション設定 var gridOption={ id : "grid1" //任意のid ,container : "gridbox" //Gridを表示するdivのid ,loadURL : "search.php" //外部Data(JSON) ,replaceContainer : true ,dataset : dsOption ,columns : colsOption ,encoding : "UTF-8" ,pageSize:5 //ページのサイズ ,pageSizeList : [5,10,15,20,25,30] //表示単位 ,width: "680" //"100%" // 700, ,height: "150" //"100%" // 330, ,showGridMenu : true //メニュ ,allowCustomSkin : true //スキンテーマの選択 ,skin:"mac" //既定のスキン // nav | pagesize | reload | add del save | print | filter chart | state ,toolbarContent : " nav | goto | pagesize | reload | print | filter| state " ,allowFreeze : true //列の固定 ,allowGroup : true //グループ表示 ,allowHide : true //列の非表示 //,autoLoad : false //自動ロード ,remotePaging : false ,remoteSort : false ,remoteFilter : false }; var mygrid=new Sigma.Grid(gridOption); //gridインスタンス生成 Sigma.Util.onLoad(Sigma.Grid.render(mygrid)); //グリッドのロード
ポイントになるのは、
-
- ”container”: グリッドを表示するDivタグのid。
- ”loadURL”: JSONデータを返すurl。
- ”remotePaging”: ページング処理をサーバーサイドで行うか?true又はfalse。
です。 ここで少しハマったのが、”remotePaging”なのですが、付属サンプルなどの例にある、JavaScripの内部データを使った場合は、”remotePaging”を特に設定しなくてもページングしてくれるのですが、外部データの場合?は、明示的に”false”を指定しないと、ページングをしてくれませんでした。他は付属的なオプションが沢山あるので、割愛します。オプションを設定したらSigma Gridのインスタンスを生成するだけす。
<?php class Model{ private $dumyData = array( array("ordern"=>10001 ,"odate"=>20100301 ,"ldate"=>20100310 ,"sdate"=>20100309 ,"custn"=>"海猫商事" ,"shipn"=>"海猫工業" ,"sstate"=>"静岡県" ,"sadd1"=>"XXXXXXXXXXX" ,"empln"=>"鈴木太郎" ,"transn"=>"アカネコ" ) //===== ダミーデータ ===== ,array("ordern"=>10007 ,"odate"=>20100303 ,"ldate"=>20100319 ,"sdate"=>20100317 ,"custn"=>"サンライトテクノロジー" ,"shipn"=>"サンライトテクノロジー" ,"sstate"=>"静岡県" ,"sadd1"=>"XXXXXXXXXXX" ,"empln"=>"楠正志" ,"transn"=>"ペルカン" ) ); public function getList(){ //戻り値 $ret = array(); //ダミーデータを返す。 $ret["data"] = $this->dumyData; return $ret; } } header('Content-type:text/javascript;charset=UTF-8'); $model = new Model(); $result = $model->getList(); $rows = $result["data"]; $data = json_encode($rows); $ret = "{data:" . $data .",\n"; $ret .= "recordType : 'object'}"; echo $ret; ?>
出力JSONに、dataキーとrecordTypeキー(配列の場合はarray)を付加して、レスポンスすればOKです。