ushidayの日記

主に「IBMi」のメモに・・・

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のインスタンスを生成するだけす。

JSONを渡すsearch.php

<?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です。

■こんなかんじ

■スキンの変更

■列の固定など