如何在JSP列表中添加不同的CSS样式

Question

嗨，大家好，我需要有关jsp（第一个屏幕）中的列表的帮助。

我会这样格式化列表：

如何区分列表元素？ 后端方法还是前端方法更好？ 谢谢。

JAVA

            List<Menu> listMenu = meRepo.listMenu();
            for (Menu menu : listMenu) {
                MenuView mView = menuView.new MenuView();
                mView.setIdMenu(menu.getIdMenu());
                mView.setName(menu.getName());
                mView.setAction(menu.getAction());
                enableView.getListMenu().add(mView);
            }


            req.setAttribute(RequestAttributeKeys.VIEW_KEY, enableView);
            dispatchForward("listEnableMenu.tiles");

JSP

<table class="table table-header-rotated">
 <thead>
  <tr>
  <!-- First column header is not rotated -->
   <th></th>
  <!-- Following headers are rotated -->
  <c:forEach var="listRole" items="${requestScope.view.listRole}"    varStatus="counter">
        <th class="rotate"><div><span><c:out value="${listRole.nameRole}">      </c:out></span></div></th>
  </c:forEach>
</tr> 
  </thead>
     <tbody>
   <c:forEach var="listMenu" items="${requestScope.view.listMenu}" varStatus="counter">
        <tr>
              <th class="row-header"><c:out value="${listMenu.name}"></c:out></th>
              <c:forEach var="listRole" items="${requestScope.view.listRole}" varStatus="counter">
                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>
              </c:forEach>
        </tr>
   </c:forEach>
 </tbody>
 </table>

Answer 1

添加一个新的条件类，以检查s是否不是第一个索引。 就像是：

< th class="row-header ${!counter.first ? 'indent-class' : ''}">

应该做得很好。

Answer 2

这是渲染后的代码：

<table class="table table-header-rotated">
 <thead>
   <tr>
  <!-- First column header is not rotated -->
    <th></th>
  <!-- Following headers are rotated -->

        <th class="rotate"><div><span>Super user</span></div></th>

        <th class="rotate"><div><span>Gestore</span></div></th>

        <th class="rotate"><div><span>Fatca Office</span></div></th>

        <th class="rotate"><div><span>Responsabile antiriciclaggio</span>  </div></th>

        <th class="rotate"><div><span>22</span></div></th>

        <th class="rotate"><div><span>Operatore</span></div></th>

        <th class="rotate"><div><span>Diagnostico DPS</span></div></th>

        <th class="rotate"><div><span>Responsabile intermediario</span></div></th>

        <th class="rotate"><div><span>EDP</span></div></th>

        <th class="rotate"><div><span>Group AML</span></div></th>

        <th class="rotate"><div><span>AML Officer</span></div></th>

        <th class="rotate"><div><span>Agenzia delle Entrate</span></div></th>

        <th class="rotate"><div><span>Disattivato</span></div></th>

</tr> 
 </thead>
   <tbody>

        <tr>

              <th class="row-header">MANAGEMENT PARAMETERS</th>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

        </tr>

        <tr>

              <th class="row-header">SYSTEM PARAMETERS</th>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

        </tr>

        <tr>

              <th class="row-header">Gestione Gruppi Intermediari</th>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

        </tr>

        <tr>

              <th class="row-header">Gestione Intermediari</th>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

        </tr>

        <tr>

              <th class="row-header">Gestione Ruoli</th>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

        </tr>

        <tr>

              <th class="row-header">Gestione Utenti</th>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

        </tr>

        <tr>

              <th class="row-header">Gestione Menu</th>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

        </tr>

        <tr>

              <th class="row-header">Gestione Politiche Password</th>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

        </tr>

        <tr>

              <th class="row-header">Gestione Application Suites</th>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

                <td><input name="column3[]" type="checkbox" value="row1-column3"></td>

        </tr>