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のファイルリストの変更

おすすめの記事

WordPressで手軽にAdblock対策するならBetter Stop AdBlockで決まり!

WordPressで手軽にAdblock対策するならBetter Stop AdBlockで決…

そのサイト、WordPressじゃなくてWixで十分じゃない?

そのサイト、WordPressじゃなくてWixで十分じゃない?

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

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

プロ根性のあるデザイナーやブロガーにお勧めする4つの画像編集ソフト

プロ根性のあるデザイナーやブロガーにお勧めする4つの画像編集…

Googlebotを手懐ける!robots.txtの書き方とrobots.txtテスターの使い方

Googlebotを手懐ける!robots.txtの書き方とrobots.txtテスター…

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

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

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

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

Apacheのmod_deflateでコンテンツを圧縮してサイトを高速化する方法

Apacheのmod_deflateでコンテンツを圧縮してサイトを高速化する…


コメントを残す

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

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください