tableでの折り返しを実現する方法  【解決済み】

質問全般・改善要望
返信する
li4ch
メンバー
メンバー
記事: 18
登録日時: 2009年10月09日(金) 14:41

tableでの折り返しを実現する方法

投稿記事 by li4ch »

こんにちは、いつも利用させてもらってます。

さて、質問なんですが下記のような感じのテーブルを実現するには
どうしたらよいでしょうか?

コード: 全て選択

<table>
<tr>
<td>なんたら</td>
<td>かんたら</td>
<td>なんたら</td>
</tr>
<tr>
<td>なんたら</td>
<td>かんたら</td>
<td></td>
</tr>
<tr>
・・・・
</table>
要は、3列とか4列のテーブルを
dittoなどを使って一覧で出したいのですが
方法がわかりません。

2列であれば、tplとtplAltで実現できたのですが
それ以上は、どうしても出来ませんでした。

なにか解決する方法はあれば教えてください。
よろしくお願いします。
アバター
yama
管理人
記事: 3236
登録日時: 2009年7月29日(水) 02:50

Re: tableでの折り返しを実現する方法

投稿記事 by yama »

dittoではできません。機能を追加する必要があります。(いずれやってみたいです)

http://japan.nucleuscms.org/bb/viewtopic.php?t=3552
他のCMSの例ですみませんが、tableタグを使わない代替的な方法もあります。だいたいはこれでうまくいくことが多いと思います。
li4ch
メンバー
メンバー
記事: 18
登録日時: 2009年10月09日(金) 14:41

Re: tableでの折り返しを実現する方法

投稿記事 by li4ch »

さっそくのお返事ありがとうございます。

むむむ・・・やはりdittoでは、出来ないんですね。
divでなんとか、やってみたいと思います。

movable typeのMTSetVar MTVarみたいな変数を自由にセットできるような
機能があれば、なんとかなるかなと思ったんですが、探してもなさそうですね。

参考のページを見て、なんとかがんばってみます。
アバター
yama
管理人
記事: 3236
登録日時: 2009年7月29日(水) 02:50

Re: tableでの折り返しを実現する方法

投稿記事 by yama »

http://weblog.cror.net/2009/01/movabletype-1.html
こういうことができるCMSはMTくらいな気がします。MODxはこういう発想からは遠いかも・・
sama55
メンバー
メンバー
記事: 816
登録日時: 2009年8月03日(月) 08:16

Re: tableでの折り返しを実現する方法

投稿記事 by sama55 »

レイアウト的にtableの方が都合が良い時がありますよね。勉強目的で自分も下のサイトで、敢えてテーブルで作ってみました。下の例はページの幅的に3列以上必要なかったので、Dittoを改造せずにtplとtplAltでやってます。HTMLコードを見てください。
通常、余程の理由がない限りdivやul/liで流し込むので、「どうしてもテーブルでないと・・・」という時の苦肉の策として、コードの汎用性はありませんが下などいかがでしょう。PHPやプレ-スホルダの理解、場合によってはmodxAPIを多少理解してることが必要になるので、改造そのものは軽微ですが、若干レベルが高い操作になります。

【改造プラン】
tplclm1, tplclm2, tplclm3、・・・という感じでパラメータを追加して、出現ドキュメントの順番(列位置)に応じてテンプレートを切り替えられるようにDittoを改造します。実際に試したわけではありませんが、2箇所ほど改造すればいけそうな気がします。

【3列の場合のDittoの改造例】

スニペット(L706近辺)

コード: 全て選択

$templates = array(
	"default" => "@CODE".$_lang['default_template'],
	"base" => $tpl,
	"alt" => $tplAlt,
	"first" => $tplFirst,
	"last" => $tplLast,
	"current" => $tplCurrentDocument,  // add ","
	"clm1" => $tplclm1,  // add
	"clm2" => $tplclm2,  // add
	"clm3" => $tplclm3  // add
);
assets/snippets/ditto/classes/template.class.inc.php (L175近辺)

コード: 全て選択

		if ($x % 2 && !empty($templates["alt"])) {
			$currentTPL = "alt";
		}
		// add [start]
		switch ($x % 3) { // exsample for 3 columns
		case 0:
			if (!empty($templates["clm1"]) { $currentTPL = "clm1"; }
			break;
		case 1:
			if (!empty($templates["clm2"]) { $currentTPL = "clm2"; }
			break;
		case 2:
			if (!empty($templates["clm3"]) { $currentTPL = "clm3"; }
			break;
		default:
		}
		// add [end]
【注意点】
1)tplAlt, tplcurrent, tplfirst, tpllastとの併用は不可 (テーブルだから使いませんよね)
2)テーブルで実現する際の一番の問題は、ドキュメント総数が列数に対して端数が出るケースへの対処です。その場合は、Dittoの処理後、"stop"プレースホルダを見て、"<td>&nbsp;</td></tr>"を自前で閉じるやる必要があります。(この辺がレベルが高くなる理由・・・ 8-)
li4ch
メンバー
メンバー
記事: 18
登録日時: 2009年10月09日(金) 14:41

Re: tableでの折り返しを実現する方法

投稿記事 by li4ch »

なるほど :o
ありがとうございます。試してみます。

divやliでやると中身の文の長さで高さが変わるために、tableを使う必要がありました。
ボーダーがなければなんとかごまかせるんですが、ありなので
cssでなんとかやっても、ブラウザによって表示がまちまちなので困ってました。
sama55 さんが書きました: 【注意点】
1)tplAlt, tplcurrent, tplfirst, tpllastとの併用は不可 (テーブルだから使いませんよね)
2)テーブルで実現する際の一番の問題は、ドキュメント総数が列数に対して端数が出るケースへの対処です。その場合は、Dittoの処理後、"stop"プレースホルダを見て、"<td>&nbsp;</td></tr>"を自前で閉じるやる必要があります。(この辺がレベルが高くなる理由・・・ 8-)
自前で閉じるのは、記事のトータルをphxで計算して分岐をつけようと思います。
sama55
メンバー
メンバー
記事: 816
登録日時: 2009年8月03日(月) 08:16

Re: tableでの折り返しを実現する方法

投稿記事 by sama55 »

li4ch さんが書きました:divやliでやると中身の文の長さで高さが変わるために、tableを使う必要がありました。
ボーダーがなければなんとかごまかせるんですが、ありなので
cssでなんとかやっても、ブラウザによって表示がまちまちなので困ってました。
よく思い出したら自分も同じ理由だったかもしれません・・・(高さ・・・そう高さです)
li4ch さんが書きました:自前で閉じるのは、記事のトータルをphxで計算して分岐をつけようと思います。
"phx"というお言葉を頂いたのでスキルは問題なしですね。健闘を祈ってます。 ;)
li4ch
メンバー
メンバー
記事: 18
登録日時: 2009年10月09日(金) 14:41

Re: tableでの折り返しを実現する方法

投稿記事 by li4ch »

うーむぅ

sama55さんに教えていただいた改造を施してみたのですが
うまく動作しませんでした。

この場合のスニペットはどのような書き方をすればよいですか?

コード: 全て選択

[[Ditto? &parents=`XX` &paginate=`1` &tplclm1=`clm1` &tplclm2=`clm2` &tplclm3=`clm3`・・・]]
のように書いてみたのですが・・・・

この辺の書き方がまずかったですかね?
li4ch
メンバー
メンバー
記事: 18
登録日時: 2009年10月09日(金) 14:41

Re: tableでの折り返しを実現する方法  【解決済み】

投稿記事 by li4ch »

いろいろ調べていたところ
[+ditto_iteration+]というプレイスフォルダで
ページ毎にインクリメントで変数を出力出来る事がわかり、一気に解決しました!!

コード: 全て選択

<table>
[[Ditto? &parents=`XXX` &id=`aa` &display=`all` &paginate=`1` &tpl=`XXX`]]
[+phx:if=`[+aa_total:math=`?%3`+]`:is=`1`:then=`
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
`+]
[+phx:if=`[+aa_total:math=`?%3`+]`:is=`2`:then=`
<td>&nbsp;</td>
</tr>
`+]
</table>
チャンク

コード: 全て選択

<!-- [+ditto_iteration+] -->
[+phx:if=`[+ditto_iteration:math=`(?+1)%3`+]`:is=`1`:then=`<tr>`+]
<td>[+title+]</td>
[+phx:if=`[+ditto_iteration:math=`(?+1)%3`+]`:is=`0`:then=`</tr>`+]
これでイメージしてたとおりのものが出来ました。

ただ、もう少しスマートにできればいいですね。
やはり、sama55さんの改造のように、
dittoだけで完結するほうがよいと思います。

いやー、これでぐっすり眠れます^^

yamaさん、sama55さんありがとうございました。
返信する