PukiWikiで表をソートしたい


投稿日:2011年9月14日
  • 3
  • 0



本家PukiWiki 1.4.7で表を作り、昇順・降順で並び替える。

plusバージョンではプラグインが使えるが、本家では改造が必要で非常に大変だった。さらにファイルのリンクが細切れで必要なファイルを集めるのも大変だった。

長々経緯や愚痴を書いてもしょうがないので早速方法を書こう。


1.まず「pukiwiki.ini.php」の

define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 1);

これを

define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0);

このように変更し複数行プラグインを利用可能にする。


2.「sortabletable.inc.php」(ここでは既に変更済みのものをアップロードしている。)

$head_tags[] = '<script charset="utf-8" type="text/javascript" src="' . SKIN_URI . 'sortabletable.js"></script>'; $head_tags[] = '<script charset="utf-8" type="text/javascript" src="' . SKIN_URI . 'filterabletable.js"></script>';

これを

$head_tags[] = '<script charset="utf-8" type="text/javascript" src="' . SKIN_DIR . 'sortabletable.js"></script>'; $head_tags[] = '<script charset="utf-8" type="text/javascript" src="' . SKIN_DIR . 'filterabletable.js"></script>';

このように変更。


3.「skinフォルダ」に「sortabletable.js」「filterabletable.js」を追加。


4.「imageフォルダ」に「blank.png」「downsimple.png」「upsimple.png」をファイルを追加。

これは自分で作成する必要がある。それぞれ「blank.png」選ばれてない状態。「downsimple.png」下向き(降順)。「upsimple.png」上向き(昇順)。となる。


5.「skin/pukiwiki.css.php」の最後に

/*sortabletable.js*/
 .sort-arrow {
 width: 17px;
 height: 17px;
 background-position: center center;
 background-repeat: no-repeat;
 margin: 0 2px;
 background-image: url("../image/blank.png");
 }
 .sort-arrow.descending {
 background-image: url("../image/downsimple.png");
 }
 .sort-arrow.ascending {
 background-image: url("../image/upsimple.png");
 }
 /*filterabletable.js*/
 .filter-box {
 width: 100%;
 height: 1.5em;
 margin: 0;
 }

を追加。微調整は普通にCSSを編集するようにすれば問題ない。


実際にWikiへの記述は

#sortabletable(sort=String|Number){{
|LEFT:80|LEFT:150|c
 |果物|価格|h
 |林檎|25|
 |オレンジ|5|
 |梨|20|
 |マンゴー|500|
 }}

このように「#sortabletable(){{}}」と指定すれば出来る。「sort=」の部分の「Number」は数字の整列に、「String」は文字列の整列に使える。「h」とはヘッダーのことだ。

実際の使用例はこちら(円など文字列が加わるとソート出来ないため現在は使ってない)


更に2番目のオプションに「1」を加えるとフィルタが使える。「#sortabletable(sort=Number|Number,1)」このように記述すると「Enable Filter」というチェック項目が出る。要約するとエクセルにおけるプルダウンメニューによる絞り込み機能だ。

複雑で大量のリストを扱う際などとても利便性の高い機能だ。


参考にさせていただいたサイト

http://taru.s223.xrea.com/index.php?diary%2F2006-11-08
http://taru.s223.xrea.com/index.php?Note%2Fdiary%2F2006-11-08


追記
◯◯円」や「◯◯cm」など文字列が追加されると正常に動作しない。
純粋な数字のみか、文字列でのソートで正常に動作する。
現状では使用したいページには使えない。

そのためこのプラグインを参考に「tablekit.js」を使用したプラグインを作った。

記事はこちら



現在のページを共有する



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

PukiWikiで円や単位のある表をソートしたい PukiWikiで円や単位のある表をソートしたい
PukiWikiで表をソートしたい PukiWikiで5段階評価を付けるプラグインを作成しました
PukiWikiで表をソートしたい 5段階評価プラグインを通して学ぶPukiWikiのプラグインを作成する方法
PukiWikiで表をソートしたい 5段階評価を付けることができるjQuery Ratyプラグインの使い方
PukiWikiで表をソートしたい PukiWikiをビジュアルエディタ(TinyMCE)で編集できるプラグインを作成
PukiWikiでテーブルの回り込み PukiWikiでテーブルの回り込み
PukiWikiのファイルリストの変更 PukiWikiのファイルリストの変更

おすすめの記事

最新のXAMPPをインストールし、安全・高速に運用する方法

最新のXAMPPをインストールし、安全・高速に運用する方法

lazysizesの使い方を通して学ぶ、画像の遅延読み込みとレスポンシブイメージの基本

lazysizesの使い方を通して学ぶ、画像の遅延読み込みとレスポン…

fluentdと連動して集計処理を行うNorikraの導入方法

fluentdと連動して集計処理を行うNorikraの導入方法

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

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

WordPressの最速キャッシュを探せ!APC、memcached、Transients APIを比較

WordPressの最速キャッシュを探せ!APC、memcached、Transients…

Adblock対策プラグイン「End of Adblock Cycle」を作成しました

Adblock対策プラグイン「End of Adblock Cycle」を作成しました

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

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

WordPress公式テーマTwenty Tenを子テーマでレスポンシブWebデザインに変更

WordPress公式テーマTwenty Tenを子テーマでレスポンシブWebデ…


コメントを残す

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

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