Smarty 在表格(table)里输出多列多行数据的方法

Smarty 是一个非常流行的 PHP 模板引擎,她支持缓存,能在实现 MVC 构架的同时,提高程序执行效率,深受众多 PHPer 的喜爱。Smarty 提供功能全面的模板语法,如果使用得当,你能很方便的实现你想要的显示方式。

本文讨论的是一个对初学者来说非常头痛的问题:将数据分成多列显示在表格中。单条数据循环对大多数模板引擎来说,实现都非常简单,但是要每行显示多条记录就需要一些额外的设置了。本文详细说明了解决这一问题的方法,相信对初学者非常有用。

模板文件:

 
<table border="1">
	<tr>
 
<?section name=site loop=$siteList?>
 
	<td><?$siteList[site].url?></td>
 
	<?if $siteListColumn > 1 ?>
 
	<?if $smarty.section.site.index != 0 && ($smarty.section.site.index + 1) % $siteListColumn == 0 ?>
	</tr>
	<tr>
	<?/if?>
 
	<?else?>
	</tr>
	<tr>
	<?/if?>
 
<?/section?>
 
	</tr>
</table>

注:示例中的模板定界符为 <??>

PHP 代码:

 
<?php
 
// 说明:Smarty 在表格(table)里输出多列多行数据的方法
// 站点:http://www.codebit.cn
 
// 设置列表内容
$siteList = array(
	array('url'=>'http://www.codebit.cn'),
	array('url'=>'http://YITU.org'),
	array('url'=>'http://www.google.com'),
	array('url'=>'http://www.baidu.com'),
	array('url'=>'http://www.yahoo.com.cn'),
	array('url'=>'http://www.163.com'),
	array('url'=>'http://www.sohu.com'),
	array('url'=>'http://www.sina.com.cn'),
);
 
// 列表数据统计
$siteListCount = count($siteList);
 
// 显示列数
$siteListColumn = 3;
 
// 如果列表数据不能将最后一行填满,
// 如:共 8 条记录,每列 3 条记录,最后一行还差 1 条
if($siteListColumn > 1 && $siteListCount % $siteListColumn != 0)
{
	// 计算最后一行还差几列
	$emptyColumn = $siteListColumn - ($siteListCount % $siteListColumn);
 
	for($i=0; $i<$emptyColumn; $i++)
	{
		// 用空值填充,保证最后一行正确显示
		$siteList[$siteListCount + $i] = array('url'=>'&nbsp;');
	}
}
 
// 将显示列数赋值到模板
$smarty->assign('siteListColumn', $siteListColumn);
 
// 将显示数据赋值到模板
$smarty->assign('siteList', $siteList);
 
?>

此代码可以将指定数据显示在一个任意列(通过 $siteListColumn 设置)的表格中。

除了将数据显示在表格中,我们还有另外一个选择,那就是将数据显示在一个 UL 列表中,然后通过 CSS 控制 LI 的宽度,同样也能实现多列数据显示。这种方法在前台页面中也实现了数据和结构的分离,页面上只有数据,具体显示由 CSS 控制,这样,就实现了前台页面的 MVC 构架,好处多多。

用 UL 实现类似 Table 的数据列表样式

在 CSS 变成热门之前,大多数人都是用 table 来显示数据或者控制页面布局,自从大家开始关注 CSS 起,人们发现, table 远没有用 CSS 控制的代码结构清晰,而且一旦 CSS 被缓存到客户端,直接从服务器端加载的数据就大大减少了。因此,有众多的人开始研究 table 的替代方案,从页面布局到内容导航,而本文介绍的技巧是用 CSS 控制 <ul> 来实现类似于 table 的数据列表样式。

先看看效果:

css table

用 UL 实现类似 Table 的数据列表样式 – 示例

通过上面的图片和示例,我们很容易发现通过 CSS 是很容易实现类似 table 的数据列表样式,接下来让我们看看代码:

先看看 CSS 部分:

 
<style type="text/css">
<!--
body, td, div, p, span, textarea, select {
	font-size: 12px; 
	font-family: verdana, arial, helvetica, sans-serif
}
a {
	color: #003499; 
	text-decoration: none; 
	font-size: 12px;
}
a:hover {
	color: #000000; 
	text-decoration: underline; 
	font-size: 12px;
}
ul{
	margin:0px;
	padding:0px;
	width:265px;
	display:block;
	clear:both;
}
ul li{
	float:left;
	list-style-type:none;
	border-top:#000 solid 1px;
	border-left:#000 solid 1px;
	width:65px;
}
.border-r{
	border-right:#000 solid 1px;
}
.border-b{
	border-bottom:#000 solid 1px;
}
.border-l{
	border-right:#000 solid 1px;
	border-bottom:#000 solid 1px;
}
-->
</style>

接着再看看 (X)HTML:

 
<ul>
	<li>1-1</li>
	<li>1-2</li>
	<li>1-3</li>
	<li class="border-r">1-4</li>
</ul>
<ul>
	<li>2-1</li>
	<li>2-2</li>
	<li>2-3</li>
	<li class="border-r">2-4</li>
</ul>
<ul>
	<li>3-1</li>
	<li>3-2</li>
	<li>3-3</li>
	<li class="border-r">3-4</li>
</ul>
<ul>
	<li class="border-b">4-1</li>
	<li class="border-b">4-2</li>
	<li class="border-b">4-3</li>
	<li class="border-l">4-4</li>
</ul>

可见,控制显示样式的代码和数据结构分离后,整个代码更加清晰了,同时一旦 CSS 被缓存了,在其他页面调用相同样式的时候,加载的代码大大减少,而且,通过这样分离,我们很容易通过修改 CSS 而改变整个网站的风格。使网站改版或者维护变得更加容易。