带有 Thymeleaf 的标签引导程序

Posted 2023-02-27

【中文标题】带有 Thymeleaf 的标签引导程序

【英文标题】：Tabs bootstrap with Thymeleaf

【发布时间】：2021-10-13 22:48:35

【问题描述】：

我从控制器收到：

public Mono<String> getShops()

.....
  model.addAttribute("shops", shops);
  
return Mono.just("shoppage");

在我的 shoppage.html 中，我有带有表格的标签：

  <ul class="nav nav-tabs">
   <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#active-tab"
                       aria-current="page">ACTIVE</a>
                </li>
   <li class="nav-item">
     <a class="nav-link" data-bs-toggle="tab" data-bs-target="#unactive-tab"
                       aria-current="page">NON_ACTIVE</a>
                </li>
            </ul>

    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade active show" id="active-tab">
       <div>
         <table class="table table-hover">
           <thead>
           <tr>
           <th scope="col">Id</th>
           </tr>
            </thead>
            <tbody>
            <tr th:each="shop : $shops" th:if="$shop.status == 'ACTIVE'">
           <th class="clickable-row" th:id="$shop.id" th:text="$shop.id" scope="row">d</th>
           </tr>
            </tbody>
            </table>
            </div>
           </div>

                <div class="tab-pane fade" id="unactive-tab">
           <div>
         <table class="table table-hover">
           <thead>
           <tr>
           <th scope="col">Id</th>
           </tr>
            </thead>
            <tbody>
            <tr th:each="shop : $shops" th:if="$shop.status == 'NON_ACTIVE'">
           <th class="clickable-row" th:id="$shop.id" th:text="$shop.id" scope="row">d</th>
           </tr>
            </tbody>
            </table>
            </div>

当商店的状态 (shop.status == ACTIVE) 处于活动状态时，我需要元素，反映在第一个选项卡中，当不活动时 (shop.status == NON_ACTIVE)，然后在第二个选项卡中。但是第二个选项卡中的表格始终为空，无论数据如何。

------------------已解决

问题是我正在使用

IReactiveDataDriverContextVariable shops = new ReactiveDataDriverContextVariable(shopService. getShopByUserId(userPrincipal.getId()), 1, 1); 

在我的控制器中。

【参考方案1】：

试试这个，但我认为从控制器收到的数据有问题，你能检查一下 NON_ACTIVE 是否正确接收

    <table class="table table-hover">
    <thead>
        <tr>
            <th scope="col">Id</th>
        </tr>
    </thead>
    <tbody>
        <tr th:each="shop : $shops" th:if="$#strings.equals(shop.status, 'ACTIVE')">
            <td class="clickable-row" th:id="$shop.id" th:text="$shop.id" scope="row">d</td>
        </tr>
    </tbody>
</table>

<table class="table table-hover">
    <thead>
        <tr>
            <th scope="col">Id</th>
        </tr>
    </thead>
    <tbody>
        <tr th:each="shop : $shops" th:if="$#strings.equals(shop.status, 
    'NON_ACTIVE')">
            <td class="clickable-row" th:id="$shop.id" th:text="$shop.id" 
    scope="row">d</td>
        </tr>
    </tbody>
</table>

【讨论】：

谢谢。但问题是我使用的是 IReactiveDataDriverContextVariable shop = new ReactiveDataDriverContextVariable(shopService.getShopByUserId(userPrincipal.getId()), 1, 1);在我的控制器中。