SQLの窓

2015年11月19日


jQuery プラグイン : Columns と PHP の連携と、ドキュメントには書かれていないカスタマイズ方法

デモページ


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      



【IFRAME パッケージの最新記事】
posted by lightbox at 2015-11-19 14:29 | Comment(0) | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり