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>