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