デモページ
jQuery プラグインの Columns は、JSON データを読み込むだけで上のような至れり尽くせりのテーブル要素による一覧表示を可能にします。
問合せテーブルの特徴
1) ページ処理( 次ページと前ページ )
2) ページ毎の行数変更
3) テーブル上のデータのリアルタイム検索
4) 列のタイトルをクリックしてソート
※ 特別なオプションを設定しなければ、3) と 4) は全ての列が対象となります
とても簡単な PHP との連携
PHP 側では、JSON で行の配列を返せば良いので、データベースの読み込み処理は、一括で簡単です。列名やデータの表示方法は、JSON のデータで決定されるので、SQL を変更する事によって自由自在に表示を変更できます。
<?php
header( "Content-Type: application/json; Charset=utf-8" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
require_once("dbsetting.php");
$query = <<<QUERY
-- ***********************************************
-- SQL 開始
-- ***********************************************
select
SYAIN.社員コード,
SYAIN.氏名,
SYAIN.フリガナ,
SYAIN.所属,
A.名称 as 所属名,
-- SYAIN.性別,
B.名称 as 性別,
SYAIN.給与,
ifnull(SYAIN.手当,'') as 手当,
ifnull(SYAIN.管理者,'') as 管理者,
ifnull(SYAIN2.氏名,'') as 管理者名,
ifnull(DATE_FORMAT(SYAIN.生年月日,'%Y/%m/%d'),'') as 生年月日
from
社員マスタ SYAIN
left outer join コード名称マスタ A
on SYAIN.所属 = A.コード
left outer join 社員マスタ SYAIN2
on SYAIN.管理者 = SYAIN2.社員コード
left outer join コード名称マスタ B
on SYAIN.性別 = B.コード
where A.区分 = 2 and B.区分 = 1 and SYAIN.削除区分 is NULL
and SYAIN.氏名 like '%{$_GET['cond']}%'
order by SYAIN.社員コード
-- ***********************************************
-- SQL 終了
-- ***********************************************
QUERY;
$result = $connect->query($query);
$row = $result->fetch_all(MYSQLI_ASSOC);
print json_encode($row);
?>
mysqli_result::fetch_all
ドキュメントにはっきり書かれていないカスタマイズ
ソースコードを読まないと解りませんが、『問合せテーブルの特徴』での4つの処理毎にイベントが用意されています。これらのイベントが発生すると、テーブルの表示が書き換わるのですが、HTML そのものを再構築するので外部からカスタマイズするには無理があります。そこで、以下の4つの定義済みイベントが必要になります。
1) pageHandler
2) sizeHandler
3) searchHandler
4) sortHandler
これらのイベントは、他のオプションプロパティと同じ部分で定義されているので、設定時のプロパティとして無名関数を定義する事によって、外部から処理する事が可能になります。
しかし、この中に書く処理には、デフォルトの処理があるので、外部で定義する場合もその処理は記述しなければなりのません。そして、そのデフォルトの処理は、ソースコードを読まないと具体的に知る事ができません。
▼ 以下がその処理を含めた、デモ用の初期設定です。
$(function() {
$.get("syain.php?cond=" , function(data){
$('#columns').columns({
data: data,
templateFile: 'columns/templates/custom.mst',
showRows: [10, 20, 50],
size: 10,
sortableFields: ['社員コード','氏名'],
searchableFields: ['所属'],
pageHandler: function(){
this.create();
customTable();
},
sortHandler: function() {
this.page = 1;
this.create();
customTable();
},
searchHandler: function(event) {
if(this.liveSearch) {
this.create();
} else {
if(event.keyCode == '13') {
this.create();
}
}
customTable();
},
sizeHandler: function() {
this.create();
customTable();
}
});
// プラグイン実装後の1回きりの処理
customTable();
});
});
this.create() がテーブルの再構築処理です。ですから、カスタマイズするのは、this.create() の後ろに自分の処理を行う必要があります。( this.create() の前に行う処理の場合は、オプションや内部データを直接変更する処理になると思います )
ここで行った『あとから CSS で右よせにしてカンマ編集』
テーブルなので、jQuery の find を使う事によって結構単純に目的の列の情報を変更する事ができます。以下の customTable 関数では、TH 部分と TD 部分を個別に設定しています
function customTable() {
// 給与と手当
$("table").find("th").eq(6).css("text-align", "right");
$("table").find("th").eq(7).css("text-align", "right");
$("table").find("tr").each( function(){
// 給与と手当
$(this).find("td").eq(6).css("text-align", "right");
$(this).find("td").eq(7).css("text-align", "right");
var kyuyo = $(this).find("td").eq(6).text();
kyuyo = parseInt(kyuyo,10);
// カンマ編集
kyuyo = kyuyo.toLocaleString();
$(this).find("td").eq(6).text(kyuyo);
var teate = $(this).find("td").eq(7).text();
if ( teate != "" ) {
teate = parseInt(teate,10);
// カンマ編集
teate = teate.toLocaleString();
}
$(this).find("td").eq(7).text(teate);
} );
}
説明不十分なテンプレート使用方法
デフォルトのテンプレートは、ソースコードに埋め込まれてしまっています。ですから、テンプレートをカスタマイズするには、templateFile プロパティを使用する必要があります。外部ファイルに用意されたテンプレートファイルは、以下の二つです。
custom.mst
default.mst
ソースに埋め込まれているものが、default.mst のようなので、custom.mst を使ってみると、どうやらバグのようで、カスタマイズされたフィールド( ページジャンプ ) が、Plugin オプションを使わないと動作しないようですが、用意されている gotopage.js を使ってもちょっと動かないようです。
そもそも、Plugin に関する説明が全くありませんが、使うとすると内部から呼び出されるイベントとして動作します。但し、テーブル再構築後にしか呼ばれないようなので、利用範囲が限定されます。
Plugin 内のイベントは二つしか無く、init と create で、init は最初に一度だけ処理されます。create を使って、狙った要素にイベントを作成する事ができると思いますが、通常のイベントオプションを使ったほうが汎用性があるように思います。
ただ、サンプルとして付加されている、ajaxpaging.js は、プラグイン内で イベントオプション を使用しており、『必要な時に必要だけデータを取得して表示』するという処理を実現しているように見えます。
テンプレートと画像の扱い
ページ処理用の画像が、テンプレートに直接パスが埋め込まれているので、実行中のページの中に images フォルダが必要である事になっています。images の場所が違う場合は、テンプレート内を直接変更する必要があります。
サーチ用の画像は CSS 内で使用されているので、CSS があるフォルダからの相対パスが正しければ表示されます
ドキュメント内の誤記
size のデフォルトが 10 と書かれていますが、実際は 5 です
oddRowClass のデフォルトが 'ui-table-rows-even' となっていますが、完全な誤りです。実際は(あたりまえですが)、ui-table-rows-odd になります。
even と odd は、偶数・奇数です。行の背景色を交互に変える為に一般的に使用される手法です
デモで使用しているテーブルの仕様
▼ 社員マスタ
| № |
列名 |
型名 |
最大桁 |
NULL |
主キー |
| 1 |
社員コード |
varchar |
4 |
N |
1 |
| 2 |
氏名 |
varchar |
50 |
|
|
| 3 |
フリガナ |
varchar |
50 |
|
|
| 4 |
所属 |
varchar |
4 |
|
|
| 5 |
性別 |
int |
|
|
|
| 6 |
作成日 |
datetime |
|
|
|
| 7 |
更新日 |
datetime |
|
|
|
| 8 |
給与 |
int |
|
|
|
| 9 |
手当 |
int |
|
|
|
| 10 |
管理者 |
varchar |
4 |
|
|
| 11 |
生年月日 |
date |
|
|
|
| 12 |
削除区分 |
varchar |
1 |
|
|
▼ コード名称マスタ
| № |
列名 |
型名 |
最大桁 |
NULL |
主キー |
| 1 |
区分 |
int |
|
N |
1 |
| 2 |
コード |
varchar |
10 |
N |
2 |
| 3 |
名称 |
varchar |
50 |
|
|
| 4 |
数値1 |
int |
|
|
|
| 5 |
数値2 |
int |
|
|
|
| 6 |
作成日 |
datetime |
|
|
|
| 7 |
更新日 |
datetime |
|
|
|
関連する記事
イラストAC 用 : 前日ダウンロード数を一覧表示する為のブックマークレット : jQuery プラグイン使用
イラストACの管理画面に、イラスト毎の前日ダウンロード項目が追加されたので、前日にダウンロードされたイラストのみをテーブルで表示するブックマークレットを作成しました。
jQuery Columns を使って、Picasa API より アルバム一覧を表示する
