(1)
(0)
(0)
(0)
Total: 1 CakePHP Helper 一行置きに背景の色を変える
最近はCakePHPなどのフレームワークを使って開発することが多くなり、利用する機会が減ってしまいましたが、以前はSmartyをよく使っていました。
Smartyを使っていて便利だと思ったのがcycle関数です。
この関数はデータの一覧を表示する際などに下表のように一行置きにテーブル行の背景色を変更する場合などに重宝していました。
| 松井 秀喜 | ヤンキース |
| 井川 慶 | ヤンキース |
| イチロー | マリナーズ |
| 城島 健司 | マリナーズ |
| 福留 孝介 | カブス |
| 岩村 明憲 | レイズ |
| 松坂 大輔 | レッドソックス |
| 岡島 秀樹 | レッドソックス |
CakePHPで開発する際は、基本的にはテンプレートは素のPHPで記述しています。PHPでもちょっとしたIF文を記述すれば同様のことはすぐにできるのですが、、結構利用頻度が高そうなので簡単なCycleヘルパにしてみました。
使い方1 changeメソッド
1.上記の例のように、一行置きに背景色を変更する
-
<?php
-
// 背景色の定義(白と黄色の2色にローテーションさせる)
-
?>
-
<table border="1">
-
<tbody>
-
<?php foreach ($data as $i->$_data): ?>
-
<tr style="background:<?php echo $cycle->change($bgcolor, $i); ?>">
-
<td>$_data['Major']['name']</td>
-
<td>$_data['Major']['team']</td>
-
</tr>
-
<?php endforeach;?>
-
</tbody></table></div>
chaneメソッドは第2引数(上記だと$iのイテレータ)の値が変化すると第1引数の配列の値を順番に出力します。
この例だと$iが毎回変化するので、交互に白と黄色の文字列が出力されます。
2.応用編:チームが変わったら背景色を変更する
上表のようにチーム順にソートされている場合は、チームが変わったタイミングで色を変更するほうが識別し易いケースもあります。この場合は
-
<tr style="background:<?php echo $cycle->change($bgcolor, $_data['Major']['team']);?>">
と記述します。先ほどの$iのイテレータ変数の変わりにチーム名の変数を第2引数に指定します。
これで表示を行った場合は、下表のようになります。
| 松井 秀喜 | ヤンキース |
| 井川 慶 | ヤンキース |
| イチロー | マリナーズ |
| 城島 健司 | マリナーズ |
| 福留 孝介 | カブス |
| 岩村 明憲 | レイズ |
| 松坂 大輔 | レッドソックス |
| 岡島 秀樹 | レッドソックス |
使い方2 matchメソッド
3.特定の値の場合に背景色を変更する
matchメソッドは値が1の場合はA、2の場合はBといった特定の値に対応して出力を変更します。
上の例で、チーム名がカブスなら青、レッドソックスなら赤を表示させる場合は以下のように記述します。
-
<?php
-
// 背景色の定義(カブスなら青、レッドソックスなら赤)
-
?>
-
<table border="1">
-
<tbody>
-
<?php foreach ($data as $i->$_data): ?>
-
<tr style="background:<?php echo $cycle->match($bgcolor, $_data['Major']['team']); ?>">
-
<td>$_data['Major']['name']</td>
-
<td>$_data['Major']['team']</td>
-
</tr>
-
<?php endforeach;?>
-
</tbody></table>
これを実行した例は、
| 松井 秀喜 | ヤンキース |
| 井川 慶 | ヤンキース |
| イチロー | マリナーズ |
| 城島 健司 | マリナーズ |
| 福留 孝介 | カブス |
| 岩村 明憲 | レイズ |
| 松坂 大輔 | レッドソックス |
| 岡島 秀樹 | レッドソックス |
となります。
ソースコード:cycle.php
-
CycleHelper extends Helper {
-
-
/**
-
* 値が変われば背景色を変更する場合などに利用
-
*/
-
function change($list, $value, $key = 0) {
-
if($value != $this->value[$key]){
-
$this->value[$key] = $value;
-
$this->index[$key]++;
-
}else{
-
$this->index[$key] = 0;
-
}
-
}
-
return $list[$this->index[$key]];
-
}
-
-
/**
-
* 値がリストと一致した場合に表示
-
*/
-
function match($list, $value) {
-
return $list[$value];
-
}else{
-
return "";
-
}
-
}
-
}
関連するその他の記事
Comments
Leave a Reply