デモページ
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 より アルバム一覧を表示する
通常起動では、Windows Update のクリーンアップは対象になりません。Windows の設定にもよるかもしれませんが、普通はそうです。そして、場合によったらギガ台に乗ってる巨大なファイルが必要も無いのにディスクに居座ってしまいます。しょっちゅうする必要も無い事ですが、実は管理者権限で実行するのは Windows7 と Windows 10 では違うようなので一応心に留めておく必要があると思います。 さらに、管理者権限の場合は『詳細オプション』というタブがあり、必要無いと思われる復元ポイント以前のリソースも削除できます(但し、トラブル時には復元ポイントが重要になるのでむやみに削除は禁物です )
Windows7 の場合
スタートメニューがあるので比較的簡単。メニューから『プログラムとファイルの検索』から『クリーン』と入力すればクリーンアップアプリが表示されて、CTRL+SHIFT+Enter で起動すると管理者権限による起動です。 地道にメニューから探すのであれば、アクセサリ > システムツール で『ディスク クリーンアップ』を右クリックしてポップアップメニューから『管理者として実行』すればいいです。近いうちにもう一回する予定があれば、そのまま右ドラッグしてショートカットをデスクトップに作成して、プロパティの詳細設定で『管理者として実行』にチェックしておけばいいです。 Windows10 の場合 Windows10 は、Creators Update がかかっていると、『コマンドプロンプト(管理者)』がメニューから消えています(設定で戻せます)。
かわりに Power Shell(管理者)があるので、その中で cmd と入力した後 cleanmgr と入力しましょう
あるいは、以下のように入力して、CTRL+SHIFT+Enter で管理者権限で実行できます
(clean だけでもいいですね) で、いずれ(Windows 一般)にしても通常コマンドラインから実行したい場合(バッチファイルにしておけば簡単)は以下のようになります。
マニフェストファイルの作成
TeraPad.exe と同じディレクトリに、TeraPad.exe.manifest を作成して以下のような内容を書き込みます
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
