一个令人厌烦的模板页面----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>

 

 

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

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值