| 17件目(121件中) |

ページングでソート状態を見える化する

固定リンク:#0000000111   投稿者:ZiSTA 日時:2010-08-18 16:57:48   コメント( 0

CakePHP 1.2でページングを行なった時に、現在のソート順が見た目で分かるようにする方法です。
CakePHP: Extend PaginatorHelper to indicate sort field and directionにずばり書いてある方法を試してみました。このブログの一覧表示のように小さなアイコンでソート状態を示します。


#追記:CakePHP 1.3では組み込まれている模様。(下記に文字化け対策)

概要

  • PaginatorHelperを継承したクラスを作成し、Sortメソッドを改良する。
  • 改良したSortメソッドはソートしたカラムのタイトルを出力する際にclass属性に'asc'または'desc'を指定する。
  • CSSで'asc'と'desc'のクラス属性を追加してソート状態が分かるようなデザインを実現する。

実装

ヘルパーの作成

PaginatorHelperを継承したPaginatorPlusHelper(paginator_plus.php)というヘルパーを作成します。

App::import('Helper', 'Paginator');
 
class PaginatorPlusHelper extends PaginatorHelper {
 
	function sort($title, $key = null, $options = array()) {
 
		// ソート状態を取得
		$sortKey = $this->sortKey();
		$sortDir = $this->sortDir();
 
		// ソート中のカラムならclass属性を設定する
		if ($sortKey == $key && $key !== null) {
			$options['class'] = $sortDir;
		}
		return parent::sort($title, $key, $options);
	}
}

コントローラの修正

作成したヘルパーの利用を明記します。

	var $helpers = array('Html', 'Form','PaginatorPlus');

ビューの修正

作成したヘルパーを使って出力します。

<tr>
	<th><?php echo $paginatorPlus->sort('タイトル','Doc.title');?></th>
	<th><?php echo $paginatorPlus->sort('作成日','Doc.created');?></th>
</tr>

CSSの修正

CSSで矢印画像と背景色を指定しておくと、ソート状態が分かるようになります。
up.gifとdown.gifの画像ファイルを使っています。

table tr th a.asc {
	background:#e0e0e0 url(../img/up.gif) no-repeat right center;
}
table tr th a.desc {
	background:#e0e0e0  url(../img/down.gif) no-repeat right center;
}

CakePHP 1.3の場合

標準機能で実現されています。


cake.generic.cssに以下の記載があります。

th a.asc:after {
	content: ' ⇣';
}
th a.desc:after {
	content: ' ⇡';
}

矢印の部分が実際には文字化けしてしまっていました。

cake.generic.cssの先頭行に「@charset "utf-8";」を記述したら解消されました。

 

コメント

| 17件目(121件中) |
↑ ページトップ