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でページトップヘスムーススクロール

おすすめの記事

UWSCでEXCELの作業を自動化する方法

UWSCでEXCELの作業を自動化する方法

Custom Post Type UIでカスタム投稿を作って、誰でも簡単に編集できる投稿画面を作る方法

Custom Post Type UIでカスタム投稿を作って、誰でも簡単に編集…

シンプルなスパムコメント対策プラグイン「Simple AntiSpam」を作成しました

シンプルなスパムコメント対策プラグイン「Simple AntiSpam」を…

標準のアンインストーラーで消えないソフトを徹底的に削除する方法

標準のアンインストーラーで消えないソフトを徹底的に削除する…

GMO系列のホスティングサービスでGmailへメールが送信できない不具合が発生中

GMO系列のホスティングサービスでGmailへメールが送信できない…

これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方

これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザイン…

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

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

今さら聞けない、変数や関数の命名規則と、まず覚えるべき英単語200

今さら聞けない、変数や関数の命名規則と、まず覚えるべき英単…


コメントを残す

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

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