gridの使いやすいライブラリは無いものかと探していたら、w2uiというjqueryのプラグインライブラリを見つけました。色々と探した中でこれが自分的には一番使いやすかったので、メモしておきます。
【広告】
概要
jquery ベースのオールインワンライブラリーで、業務システムを作成する際に他のライブラリを置かなくても収まりそうです。 レイアウト、グリッド、ツールバー、サイドバー、タブ、フォーム、ポップアップ、ユーティリティがそろっていて、それでいて69 KB と軽量かつ高速な動作です。
グリッド
私が一番に使いたかったのはグリッドの機能です。このライブラリのほかにもjqgridなどのライブラリがありますが、これらは単体で、ポップアップやツールバーを利用したい場合は別のライブラリを配置する必要があります。また、jqgridはサンプルも豊富で良いのですが、phpからjsonを生成するのが面倒だったりします。
さて、w2uiのgrid機能ですが、とてもシンプルに実装できます。また、このgridはページングボタンを備えていません。ページングは検索と無限スクロールで実現するようになっています。
<!DOCTYPE html><html><head> <title>W2UI Demo: grid-1</title> <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.2.min.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.2.min.js"></script></head><body><div id="grid" style="width: 100%; height: 350px;"></div><script type="text/javascript">$(function(){ $('#grid').w2grid({ name:'grid', method:'GET', columns:[ {field:'lname',caption:'苗字',size:'30%'}, {field:'fname',caption:'名前',size:'30%'}, {field:'email',caption:'メール',size:'40%'}, {field:'sdate',caption:'開始日付',size:'120px'} ],records:[{ recid: 1, fname: 'John', lname: 'doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' },{ recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },{ recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },{ recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },{ recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' }]});});</script></body></html>
cakephpとの連携
データの受け渡しはjson形式で行います。cakephpでは $this->request[‘query’] にパラメータが格納されてくるので、パラメータを元にfind()のオプションを組み立て、出力もJson形式で出力します。
データの形式は、日本語リファレンスの->Docs->グリッド->概要 に詳しく書かれているので参考にしてください。
なお、無限スクロールの検索サンプルphp は github のこちらを参考にしてください。
開発元サイト
本家サイトはこちら http://w2ui.com/web/
日本語リファレンスはこちら http://w2ui.realmax.co.jp/
最後に…
このライブラリは個人的にとても気に入ったので、これから色々と記事をアップしていきたいと思います。
以上、「jqueryのプラグインライブラリ w2ui」でした。
【広告】
