一个令人厌烦的模板页面----Freemarker 之横向排列和纵向排列

      昨天晚上搞了一个很令讨厌的页面，一直加班到十点也没有把它美化，直到今天上午10点把它美化好，想起来，自己真是弱啊！

 

     因为一开妈做需的也没有给我说清楚，这一页面上的操作项目的具体排列方式，我就按默认的横向进行排列了，完成后提交了，但他们不满意，非要按纵向排列，我本来页面搞的都不怎么滴，效率很低。这下倒好慢慢的折腾那个破页面了。

 

    开始也没有仔细的去想想，只是在 ftl 文件中慢慢试怎么排列，开始的实现方式：

 

       <#assign column=1>      
       <#assign keys = priorityMap?keys>
       <#list keys as key>

                     

            <#if column%3=0><!--三列换行-->

                   <tr>

            </#if> 

            <#if ....>

                  <#assign column=column+1> 

                    <td>显示操作项</td>

            </#if>

            

             <#if column%3=0><!--三列换行-->

                   </tr>

            </#if> 

           

       <#list>

 

  以上的简单Freemarker 代码片段可以页面上的横项排列方式实现的，但需求又要求纵向排列；其实也很简单，但一开始怎么就没有他细想想#_#，实现方式如下：

 

先建table 里的一个行<tr>,再建好三个列<td> ,分别在三个<td> 中进行循环输出，代码如下：

 

<tr>

    <td>

       <#assign column=1>      
       <#assign keys = priorityMap?keys>
       <#list keys as key>

                     

             <#if ....>

                  <#assign column=column+1> 

                    <tr>

                        <td>

                             <table>具体的操作项</table>

                       </td>

                     </tr>

            </#if>

        <#list>

    </td>

    <td>

             <#assign column=1>      
       <#assign keys = priorityMap?keys>
       <#list keys as key>

                     

             <#if ....>

                  <#assign column=column+1> 

                    <tr>

                        <td>

                             <table>具体的操作项</table>

                       </td>

                     </tr>

            </#if>

        <#list>

     </td>

    <td>

            <#assign column=1>      
       <#assign keys = priorityMap?keys>
       <#list keys as key>

                     

             <#if ....>

                  <#assign column=column+1> 

                    <tr>

                        <td>

                             <table>具体的操作项</table>

                       </td>

                     </tr>

            </#if>

        <#list>

     </td>

<tr>

 

 

终于把功能实现了，页面就这样，在慢慢地的尝试之下，终于调好！哎...