FreeMarker 模板中显示完美的多列表格的方法

我以前写过在 ASP 和 XSLT 中显示完美表格的文章，最近使用 Java ，又遇到同样的问题，下面就写一个 Java 的解决方案。

FreeMarker 是一个强大的模板引擎，这是做 Java 的人都比较熟悉的，这里也不再累述了。在平时的工作中，将数据显示成表格是一个非常常见的功能，由于 table 标签的特殊性，有时候显示的表格会出现tr或者td不对称或者不符合表格结构的情况，这一般是使用index属性判断常常出现的问题。本文就介绍一种简单的方法解决这个问题。

下面的例子是采用分页的 List 对象 （photoList），photoList 对象是经过服务器计算分页后要在前端显示的所有数据，注意是只包含当前页的数据。

下面是完整的代码：


<#-- 定义要显示的列数 columnCount -->
<#assign columnCount = 2>

<#-- 计算显示当前记录集需要的表格行数 rowCount -->
<#if photoList.size() % columnCount == 0>
<#assign rowCount = ( photoList.size() / columnCount) - 1 >
<#else>
<#assign rowCount = ( photoList.size() / columnCount) >
</#if>

<#-- 输出表格 -->
<table border='1' cellSpacing="1" align="center">

<#-- 外层循环输出表格的 tr -->
<#list 0..rowCount as row >
<tr>
<#-- 内层循环输出表格的 td -->
<#list 0..columnCount - 1 as cell >
<td align="center" width='${100 / columnCount}%'>
<#-- 判断是否存在当前对象：存在就输出；不存在就输出空格 -->
<#if photoList[row * columnCount + cell]?? >
<#assign photo = photoList[row * columnCount + cell]>
${photo.title!?html} <br />
${photo.commentCount} 条评论 <br />
${photo.viewCount} 次浏览<br />
<#else>
&nbsp;
</#if>
</td>
</#list>
</tr>
</#list>
</table>

这个方法的好处就是，要更改显示的列数，只需要更改

<#assign columnCount = 2>

即可，如修改成

<#assign columnCount = 6>