Taste of Tech Topics

Acroquest Technology株式会社のエンジニアが書く技術ブログ

jqGridで簡単リッチなテーブル作成

こんにちは、しょこたんです。

今日は、HTML5とは、少し違う方向ですが、
jqGridの紹介をしたいと思います。
というのも、ついこの間久しぶりに本家のページを訪れたところ、
この4月にメジャーバージョンアップされていたので
紹介したいなと思いました。

もちろん、
新機能の紹介も合わせて行いたいと思います。

1.jqGridってそもそもなに?

jqGridは、
簡単にリッチなテーブルを作成することができるライブラリです。

javascriptライブラリの一つで、
jqueryを用いたプロダクトの一つですね。

20行程度記述し、データを入れるだけで、

というように、
・スクロールバー
・ページング
・検索機能
・1ページ当たりの表示行数の変更
というような機能が自動でつく優れものです。

2.テーブルを作ってみよう。

そんなの知ってるよなんて人は、
読み飛ばしてくださいね。

まずは、ソースを取得します。
JQuery
JQuery-ui
jqGrid

そしてhtmlファイルにscriptタグを埋め込みます。

<link rel="stylesheet" type="text/css" media="screen" href="jqGrid/css/ui.jqgrid.css" />
<script type="text/javascript" src="jquery/jquery-1.6.2.js"></script>
<script type="text/javascript" src="jquery/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="jqGrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="jqGrid/js/jquery.jqGrid.src.js"></script>

grid.locale-en.jsは、footerを追加するために必要なライブラリなので、
好きな言語を選択して必ず入れてくださいね。

さあこれで準備ができました。
テーブルを呼び出してみましょう。

まずは、テーブルを表示する対象のテーブルタグと、footer用のdivタグを書いておきます。

<table id="sample1"></table>
<div id = "pager1"></div>

それらに対し、以下のように記述し、テーブルを作成。

//列の設定
var colModelSettings= [	
    {name:"radio",index:"radio",width:50,align:"center",classes:"radio_class"},
	{name:"no",index:"no",width:70,align:"center",classes:"no_class"},
	{name:"name",index:"name",width:200,align:"center",classes:"name_class"},
	{name:"age",index:"age",width:200,align:"center",classes:"age_class"},
	{name:"local",index:"local",width:200,align:"center",classes:"local_class"},
	{name:"hobby",index:"hobby",width:200,align:"center",classes:"hobby_class"}
]
//列の表示名
var colNames = ["","No.","name","age","local","hobby"];
//テーブルの作成
$("#sample1").jqGrid({
	data:date,  //表示したいデータ
	datatype : "local",            //データの種別 他にjsonやxmlも選べます。
                                       //しかし、私はlocalが推奨です。
	colNames : colNames,           //列の表示名
	colModel : colModelSettings,   //列ごとの設定
	rowNum : 10,                   //一ページに表示する行数
	rowList : [1, 10, 20],         //変更可能な1ページ当たりの行数
	caption : "Sample Display",    //ヘッダーのキャプション
	height : 200,                  //高さ
	width : 500,                   //幅
	pager : 'pager1',              //footerのページャー要素のid
	shrinkToFit : true,          //画面サイズに依存せず固定の大きさを表示する設定
	viewrecords: true              //footerの右下に表示する。
});

あとは、使いたいデータを次の形式で定義すればテーブルの完成です。

var date = [
	{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
	{no:2,name:"nakayama",age:20,local:"Japan",hobby:"Soccer"},
    ・・・・・・
];

colModelSettingsのname要素を用いて
[name:value]で定義すれば対象の列に値が入ります。
ちなみに順不同です。

出来上がり!

ここでjqGridを使いこなすときの注意。

必ず、datatypeはlocalにしましょう。

なぜなら、local形式のときのみ、
何も実装しなくても
・ページング
・検索、filter機能
・1ページ当たりの表示行数変更
などの機能が動作するからです。

datatypeがjsonやxmlだと、
通信部分を実装しなければ、上記機能を動かすことができません。

なので、json形式やxml形式でのデータのやり取りをするとしても、
javascriptのArrayとしてデータを格納しなおし、
値を入れることを強くお勧めします。

jqGridのテーブルを作成しましたが、
これだけで満足してはいけません。
便利な機能を使い倒していきましょう。

3.便利な拡張機能を使いこなそう(検索とfilter機能)

検索、filterどれも少し書くだけで追加できます。

//検索追加
$("#sample1").jqGrid('navGrid','#pager1',{
	add:false,   //おまじない
	edit:false,  //おまじない
	del:false,   //おまじない
	search:{     //検索オプション
		odata : ['equal', 'not equal', 'less', 'less or equal',
                         'greater','greater or equal', 'begins with',
                         'does not begin with','is in','is not in','ends with',
                         'does not end with','contains','does not contain']
	}   //検索の一致条件を入れられる
});

//filterバー追加
$("#sample1").filterToolbar({
    defaultSearch:'cn'     //一致条件を入れる。
                           //選択肢['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc'] 
});

これだけでfilterがつけられるなら、
サーバー側のプログラムに何も実装しなくていいので本当に便利!

4.便利な拡張機能を使いこなそう(ラジオボタンチェックボックス)

チェックボックス追加
colModelSettingsの以下を修正

{name:"radio",index:"radio",width:50,align:"center",classes:"radio_class",
 edittype:"checkbox",formatter:"checkbox",editable:true,formatoptions: {disabled : false}}

ポイントは、formatoptions: {disabled : false}ですね。
falseにしないと、灰色になってしまって何も編集ができません。

ラジオボタン追加

{name:"radio",index:"radio",width:50,align:"center",classes:"radio_class",
 formatter:function(cellvalue, options, rowObject){
	return '<input type="radio" name="radio" value="' + options.rowId + '">';
}}

ラジオボタンは、特殊で
return値として、radioボタンを返してあげなければなりません。
ちなみにこれを応用すれば、なんでも中に入れることができますね。

5.便利な拡張機能を使いこなそう(グルーピングと集計)

こちらも少し手直しをするだけで、
簡単に追加できます。

$("#sample1").jqGrid({
	data:date,  //表示したいデータ
	datatype : "local",           
	colNames : colNames,    
	colModel : colModelSettings, 
	rowNum : 10,            
	rowList : [1, 10, 20],       
	caption : "Sample Display", 
	height : 200,          
	width : 500,    
	pager : 'pager1',  
	shrinkToFit : true,
	viewrecords: true,
	grouping:true,                    //グルーピングon
	groupingView : {                  //グルーピング設定
		groupField : ['hobby'],     //グループする列指
            groupSummary : [true]
	}
});

//colModelSettingsに集計オプションを追加します。
var colModelSettings = [
	{name:"no",index:"no",width:150,align:"center",classes:"no_class",summaryType:'count', summaryTpl : 'total : ({0})'},
	{name:"age",index:"age",width:200,align:"center",classes:"age_class",summaryType:'avg', summaryTpl : '<b>Average : {0}</b>'}
         ・・・・
];

いままでいろいろと頑張って処理を記述していた部分が
ほとんどなにもしなくていいようになりましたね!

おっといつの間にか
これだけで結構な量になってしまいました(><)

Version4.0の機能紹介は、次回行いますね。

jqgridを使ってすばやく、効率的にシステムを組み上げましょう!

では!!