Question

这是我之前question的扩展。现在我可以将元素列表分成2块，并将两个元素放在一行的两列中 Freemarker代码

<#list section.field?chunk(2) as row>
    <div class="row field">
      <#list row as field>
        <@customFields.createField field=field/>
      </#list>
    </div>
</#list>

生成 HTML代码：

<div class="row field">
  <div class="col-xs-6 col-sm-6 col-md-6"><!-- column 1-->
       <label class="pocLabel">Received Date</label>
       <input type="text" name="Date" class="datePicker" required=""/>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-6"> <!-- column 2-->
       <label class="pocLabel">Signed Date</label>
       <input type="text" name="Date" class="datePicker" />
  </div>
</div>

但是当我遇到一个必须放在行级别的字段时会发生什么。它将连续没有列。
预期的Freemarker代码（伪代码）：

<#if field.@type='rowLevel'>

<#else>
<div class="row field">
          <#list row as field>
            <@customFields.createField field=field/>
          </#list>
        </div>
</#if>

{p> row level字段的预期HTML代码：

<div class="row field">
 <label class="pocLabel">Signed Date</label>
 <input type="text" name="SignedDate" class="datePicker"/>
</div>

Answer 1

由于?chunk无法检测到单元格的宽度（如果是1或2），您必须自己计算出算法。因为它比读取更容易，我建议将其放入宏中，然后调用宏。基本算法（或其可能的变体）如下：

<#-- Prints the fields arranged to two columns: -->
<#macro columnate fileds>
  <#local inCol1 = true>
  <#list fields as field>
    <#local fullRow = isFullRow(field)>

    <#if inCol1 || fullRow>
      <div class="row field"> <!-- row starts --->
    </#if>

    <#if !fullRow>
      <div class="col-xs-6 col-sm-6 col-md-6"> <!-- column ${inCol1?string('1', '2')} -->
    </#if>
    <@customFields.createField field=field />
    <#if !fullRow>
      </div>
    </#if>

    <#if !inCol1 || fullRow || !field_has_next || isFullRow(fields[field_index + 1])>
      </div> <!-- row ends -->
    </#if>

    <#local inCol1 = !inCol1 || fullRow>
  </#list>
</#macro>

<#function isFullRow field>
  <#return field.@type == 'rowLevel'>
</#function>

您可能希望将其放入#include - d / #import - ed文件中以供重复使用。现在，无论你需要什么，你都可以这样做：

<@columnate fields />

Freemarker：高级使用for循环

1 个答案: