「円」など日本語や単位が入っても動作する実用的なソート

以前のプラグインでは「円」や「cm」などがつくと文字列としてソートするため、実質数値のみでしか運用出来なかった。
そのため「円」を付けても、日付で並べても正確にソートしてくれる「tablekit.js」を使ったプラグインを作った。

制作に際して前回の投稿にある「sortabletable.inc.php」を参考に作成した。

流用させていただいたパーツも多いため、配布は行わない。メモとして導入方法を書く。

導入方法

1.「tablekitの配布サイト」から「tablekit1.2.2.zip」をダウンロード。

2.解凍したら「js」フォルダにある「tablekit.js」「fabtabulous.js」をPukiWikiの「skin」フォルダへ。

「tablekit.js」に多少手を加える。

477行目あたり

TableKit.Sortable.addSortType(
	new TableKit.Sortable.Type('number', {
		pattern : /^[-+]?[\d]*\.?[\d]+(?:[eE][-+]?[\d]+)?/,
		normal : function(v) {			
		// This will grab the first thing that looks like a number from a string, so you can use it to order a column of various srings containing numbers.			
		v = parseFloat(v.replace(/^.*?([-+]?[\d]*\.?[\d]+(?:[eE][-+]?[\d]+)?).*$/,"$1"));

とあるので、表に何も値がないときに使っている「-（ハイフン）」がきたときにテキストではなくナンバーとして認識して欲しいのでパターンに「-」を追加する。
がしかし、動作しないｗ
誰か方法教えてください。

またカンマを含んだ価格（1,000円などの表記）も数字としてソートして欲しいので「v = parseFloat(v.replace(/,/g,””));」と変更。

	new TableKit.Sortable.Type('number', {
		pattern : /^[-+]?[\d]*\.?[\d]+(?:[eE][-+]?[\d]+)?\-?/,
		normal : function(v) {
			// This will grab the first thing that looks like a number from a string, so you can use it to order a column of various srings containing numbers.
			v = parseFloat(v.replace(/,/g,""));

とした。「cm」や「個」なんかも設定できるはずだが、これも方法がわからないｗ

JavaScriptと正規表現マスターな方、良かったら教えて下さい。

詳しいタグのカスタマイズや意味については「本家」（閉鎖？）の解説を見よう。

3.「css」フォルダにある「style.css」をサイトデザインに合わせて編集してPukiWikiの「skin」フォルダへ。
ソート機能を使う表は現状1つだけなので、「tablekityouhin.css」と名前を変えてわかりやすくした。もし表が増えるようならプラグインと共にCSSを「tablekit◯◯◯.css」と追加できるように名前を付けた。

4.「css」フォルダにある「up.gif」「down.gif」（矢印の画像データ）を適宜編集してPukiWikiの「image」フォルダへ移動。
今回はソートされてない状態でも上下両方の矢印が表示されるように透過ファイルの「blank.png」を追加で作った。
そのため実際は「up.png」「down.png」「blank.png」の三つのファイルを「image」フォルダへ追加した。

（tablekit.jsにはechoフォルダが用意されていて、テーブルのデータを編集できるようになっているが、もともとPukiWikiで作られているので編集機能はいらない。そのためechoフォルタは導入しなかった。）

5.「prototypeの配布サイト」から「prototype.js」をダウンロード。PukiWikiの「skin」フォルダへ。

6.自作した「tablekityouhin.inc.php」を「plugin」フォルダへ。
書式は「#tablekityouhin{{テーブルデータ}}」と記述する。PukiWikiで表のヘッダーを表す「h」を最後に付けた部分をクリックするとソートできるようになっている。

記述例

#tablekityouhin{{
|CENTER:|LEFT:|LEFT:|c
|くだもの|価格|重さ|h　←この部分をクリックするとソートできるようになる
|林檎|150円|200g|
|みかん|200円|180g|
|オレンジ|400円|20g|
}}

今後の課題

現状で問題なく動作するが、今後の課題としてはソートをしないセルの選択を出来るようにすることだ。
「tablekit」にはソートしないセルを選ぶ機能が用意されている。

<th class="nosort">

とclassにnosortを記述すればいいだけだ。

現状では

<table class="sortable">

このようにtableにsortableというclassを追加しているため、その辺の記述を参考に改良できそうだ。

さらに「sortabletable.inc.php」を参考に作ったので、必要のないPHPの記述が残っている。詳しく解析して最適化したい。（現状動いてるので予定はないが…）

制作に際しこちらのサイトを参考にさせていただいた。