这是我之前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>
答案 0 :(得分: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 />