読者です 読者をやめる 読者になる 読者になる

Taste of Tech Topics

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

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

HTML5/CSS

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

今日は、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を使ってすばやく、効率的にシステムを組み上げましょう!

では!!

広告を非表示にする