0

前回の質問の延長です。これで、要素のリストを 2 つのチャンクに分割し、両方の要素を 1 つの行の 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 に答える