0

这是我之前问题的延伸。现在我可以将元素列表划分为 2 块并将两个元素放入单行的两列中。
自由标记代码

<#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>

字段的预期 HTML 代码row level：

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

1 回答 1

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 />
于 2013-09-09T21:34:06.513 回答