, nasıl yazabilirsiniz: her biri satır ve sütunları birleştirmek için? o 4, 8 veya daha fazla olabilir, böylece dinamik

Question

Bu

<div class="row"> 
    <div class="span3">Something</div> 
    <div class="span3">Something</div> 
    <div class="span3">Something</div> 
    <div class="span3">Something</div> 
</div> 
<div class="row"> 
    <div class="span3">Something</div> 
    <div class="span3">Something</div> 
    <div class="span3">Something</div> 
    <div class="span3">Something</div> 
</div> 

veri boyutları gibi üst üste 4 sütun yazmak istiyorum. Bu diğer şablon motoru

{{#each list}} 
    {{#if @index % 4 == 0}} 
    <div class="row"> 
    {{/if}} 
    <div class="span3">{{this.name}}</div> 
    {{#if @index % 4 == 0}} 
    </div> 
    {{/if}} 
{{/each}} 

ama nasıl thymeleaf bu arşivleyebilirsiniz şekilde arşivlenmesini ? Yolu bulamıyorum, çünkü th:each, (<div class="row"> veya <div class="span3">) etiketinde yer almaktadır.

Answer 1

MODEL KOD

List<String> data = new ArrayList<String>(); 
    data.add("1"); 
    data.add("2"); 
    data.add("3"); 
    data.add("4"); 
    data.add("5"); 
    data.add("6"); 
    data.add("7"); 
    data.add("8"); 

    model.addAttribute("datas", data); 

THYMELEAF GÖRÜNÜM KOD

<div th:each="data, row: ${datas}" th:with="numList=${#strings.listSplit('3,2,1,0', ',')}" th:if="${row.current} % 4 == 0" class="span3"> 
    <span th:each="num : ${numList}" th:with="dataIndex=(${row.index} - ${num})" th:text="${datas[dataIndex]}">data</span> 
</div> 

SONUÇ

<div class="span3"> 
    <span>1</span><span>2</span><span>3</span><span>4</span> 
</div> 
<div class="span3"> 
    <span>5</span><span>6</span><span>7</span><span>8</span> 
</div> 

ben bu sorunu çözmek için bir dizi kullanılır. Daha iyi bir yol bulacağınızı düşünüyorum.

Answer 2

th: Her öğe temel olarak kullanılabilir. Böyle Yani bir şey:

<div class="row" th:each="row : ${rows}"> 
    <div class="span3" th:each="name : ${row.names}" th:text="${name}">Something</div> 
</div> 

Answer 3

Kabul edilen yanıtı düzeltmek için yeni bir hesap oluşturdum. Kabul edilen cevap, iletilen "veriler" in bir ardışık tamsayılar dizisi olduğu sürece işe yarıyor. aşağıdaki gibi Ancak, veri yapısının her türlü çalışması için, "row.current", "row.count" için değiştirmek gerekiyor: Eğer row.current kullanıyorsanız

<div th:each="data, row: ${datas}" th:with="numList=${#strings.listSplit('3,2,1,0', ',')}" th:if="${row.count} % 4 == 0" class="span3"> 
    <span th:each="num : ${numList}" th:with="dataIndex=(${row.index} - ${num})" th:text="${datas[dataIndex]}">data</span> 
</div> 

, o zaman gerçek öğeyi kullanır Gösterilen örnekte harika olan, ancak başka herhangi bir veri yapısı için çok büyük olmayan liste. Bu yardımcı olur umarım.

DÜZENLEME: Listedeki öğelerin sayısı İşte 4 ile kalansız bir (muhtemelen mükemmel olmasa da) daha iyi bir çözüm ise kabul cevabı da çalışmaması nedeniyle daha da bu rafine zorunda

:

<div th:each="data, row: ${datas}" th:with="numList=${ {3,2,1,0} }" th:if="${row.count % 4 == 0 or row.last}" class="span3"> 
    <!-- Show all rows except the leftovers --> 
    <span th:each="num : ${numList}" th:with="dataIndex=(${row.index} - ${num})" th:if="${row.count % 4 == 0}" th:text="${datas[dataIndex]}">data</span> 
    <!-- Show the remainders (eg, if there are 9 items, the last row will have one item in it) --> 
    <span th:each="num : ${numList}" th:with="dataIndex=(${row.index} - ${num})" th:if="${row.last} and ${row.count % 4 != 0} and ${num &lt; row.count % 4}" th:text="${datas[dataIndex]}">data</span> 
</div> 

Bu mümkün olabilir açıklıklı biri ortadan kaldırmak için refactored, ama şimdi üzerinde hareket etmek zorunda olması.

Answer 4

Bu, numbers.sequence kullanılarak da yapılabilir. İstediğiniz sütun ne olursa olsun sayı colCount ayarlayın:

<th:block th:with="colCount=${4}"> 
    <div th:each="r : ${#numbers.sequence(0, datas.size(), colCount)}" class="row"> 
     <div th:each="c : ${#numbers.sequence(0, colCount - 1)}" th:if="${r + c &lt; datas.size()}" th:text="${datas.get(r + c)}" class="span3"></div> 
    </div> 
</th:block>