利用th:each语法就可以实现嵌套迭代

下面是一个基于bootstrap选项卡的实现,里面使用了从后台传来的两个对象, 一个是list 一个是list<list>嵌套形式的

第二个嵌套list需要第一个list的值作为选项卡的url

下面以一个简单的课程id 和课程详情为例

<div class="panel panel-default gray-bg">
<div class="panel-heading">
<h4 class="panel-title">当前位置: 组合培养计划->组合</h4>
</div>
<div class="panel-body">
<ul id="tabs" class="nav nav-tabs">
<li th:each="plan, status : ${listPlan}">
<a th:href = "@{'#'+${plan}}" 
  th:text = "${plan}" 
  th:class = "${status.first} ? 'active' : '' "
  data-toggle="tab"></a>
</li>
</ul>
<div id="tabsContent" class="tab-content">
<div  th:each="plan, status : ${listPlan}"
 class="tab-pane fade" 
 th:classappend = "${status.first} ? 'in active'"
 th:id = "${plan}">
 <table th:each = "message : ${planMessage[status.index]}">
<tr th:each="plans : ${message}">
<td th:text = "${plans.courseName}"></td>
<td th:text = "${plans.coursePeriod}"></td>
<td th:text = "${plans.courseTerm}"></td>
</tr>
 </table>
</div>
</div>
</div>

后端代码

thymeleaf 嵌套迭代 的实现基于选项卡

效果图:

thymeleaf 嵌套迭代 的实现基于选项卡

相关文章:

  • 2022-12-23
  • 2021-07-15
  • 2021-07-04
  • 2022-12-23
  • 2021-11-19
  • 2021-10-31
  • 2021-04-07
  • 2022-12-23
猜你喜欢
  • 2021-05-30
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-08-09
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案