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

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

 

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

 

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

 

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

                     

            <#if column%3=0>

                   

             

            <#if ....>

                  <#assign column=column+1> 

                    显示操作项

           

            

             <#if column%3=0>

                   

             

           

       <#list>

 

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

 

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

 

   

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

                     

             <#if ....>

                  <#assign column=column+1> 

                   

                       

                            

具体的操作项

                      

                     

           

        <#list>

   

   

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

                     

             <#if ....>

                  <#assign column=column+1> 

                   

                       

                            

具体的操作项

                      

                     

           

        <#list>

    

   

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

                     

             <#if ....>

                  <#assign column=column+1> 

                   

                       

                            

具体的操作项

                      

                     

           

        <#list>

    

 

 

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