PukiWikiで円や単位のある表をソートしたい


投稿日:2011年12月15日
  • 0
  • 0



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

以前のプラグインでは「」や「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"));

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

またカンマを含んだ価格(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」や「個」なんかも設定できるはずだが、これも方法がわからないw

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の記述が残っている。詳しく解析して最適化したい。(現状動いてるので予定はないが…)

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



現在のページを共有する



現在のページに関連する記事

PukiWikiで表をソートしたい PukiWikiで表をソートしたい
サーバへPukiWikiをインストール サーバへPukiWikiをインストール
PukiWikiで円や単位のある表をソートしたい PukiWikiで5段階評価を付けるプラグインを作成しました
PukiWikiで円や単位のある表をソートしたい 5段階評価プラグインを通して学ぶPukiWikiのプラグインを作成する方法
PukiWikiで円や単位のある表をソートしたい PukiWikiをビジュアルエディタ(TinyMCE)で編集できるプラグインを作成
PukiWikiでテーブルの回り込み PukiWikiでテーブルの回り込み
PukiWikiで円や単位のある表をソートしたい 目に楽しい便利な機能!jQueryでページトップヘスムーススクロール

おすすめの記事

fluentdとNorikraでDoS攻撃を遮断し、メールで通知する方法

fluentdとNorikraでDoS攻撃を遮断し、メールで通知する方法

rsyslogを利用したログファイル作成と、logrotateを利用したログのローテーション

rsyslogを利用したログファイル作成と、logrotateを利用したロ…

W3 Total Cacheの設定を通して学ぶ、WordPressを高速化するキャッシュの仕組み

W3 Total Cacheの設定を通して学ぶ、WordPressを高速化するキャ…

インストールだけじゃない!yumの設定から便利な使い方まで徹底的に解説

インストールだけじゃない!yumの設定から便利な使い方まで徹底…

WordPressに「トップへ戻る」ボタンを設置して、フックの仕組みについて学ぼう

WordPressに「トップへ戻る」ボタンを設置して、フックの仕組み…

Google Fontsの日本語フォント「Noto Fonts」の使い方

Google Fontsの日本語フォント「Noto Fonts」の使い方

Web Fontの使い方とGoogle Fontsのオススメフォント 10選

Web Fontの使い方とGoogle Fontsのオススメフォント 10選

iptablesの設定ファイルをシェルスクリプトを利用して動的に作成

iptablesの設定ファイルをシェルスクリプトを利用して動的に作成


コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。