7

このように4列連続で書きたい

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

データ サイズは動的であるため、4、8、またはそれ以上になる可能性があります。これは他のテンプレート エンジンにアーカイブされています

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

しかし、これをタイムリーフにアーカイブするにはどうすればよいですか? 属性としてth:eachタグ（<div class="row">または）にあるため、方法が見つかりません。<div class="span3">

4

5 に答える 5

13

型式コード

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 ビュー コード

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

結果

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

この問題を解決するために配列を使用しました。より良い方法が見つかると思います。

于 2013-08-01T06:24:52.900 に答える
4

受け入れられた回答を修正するために、ここでアカウントを作成しました。渡される「データ」が連続した整数の配列である限り、受け入れられた答えはうまく機能します。ただし、あらゆる種類のデータ構造で機能させるには、次のように「row.current」を「row.count」に変更する必要があります。

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

を使用するrow.currentと、リスト内の実際のアイテムが使用されます。これは、示されている例では優れていますが、他の種類のデータ構造ではそれほど優れていません。お役に立てれば。

編集：

リスト内のアイテムの数が4で割り切れない場合、受け入れられた回答も機能しないため、これをさらに改良する必要があります。これは、より良い（おそらく完全ではない）ソリューションです。

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

これをリファクタリングしてスパンの 1 つを削除できるかもしれませんが、先に進む必要があります。

于 2016-02-15T23:13:46.883 に答える
3

th:each は、基本的にどの要素でも使用できます。だから、このようなもの：

<div class="row" th:each="row : ${rows}">
   <div class="span3" th:each="name : ${row.names}" th:text="${name}">Something</div>
</div>
于 2013-07-30T21:52:18.670 に答える