在视图中显示通过模型传递的列表

时间:2018-09-10 06:50:57

标签: javascript html css spring spring-mvc

我已通过控制器将列表传递给视图。

代码:

model.put("ScheduleList", schedulelist);
        return new ModelAndView("EmployeeScheduleResult","message","Welcome "+(String)req.getSession().getAttribute("uname"));

该列表具有以下内容:

public class ScheduleList {
    Date date;
    String status;
    String color;
    //with setters ,getters and constructor. 
}

我想以这种方式打印列表:

.weekday{
background-color:blue;
}
.weekend{
background-color:grey;
}
<html>
<table>
	<tr>
		<th>MONDAY</th>
		<th>TUESDAY</th>
		<th>WEDNESDAY</th>
		<th>THURSDAY</th>
		<th>FRIDAY</th>
		<th>SATURDAY</th>
		<th>SUNDAY</th>
	</tr>
      <tr>
        <td class="weekday">2018-09-10</td>
        <td class="weekday">2018-09-11</td>
        <td class="weekday">2018-09-12</td>
        <td class="weekday">2018-09-13</td>
        <td class="weekday">2018-09-14</td>
        <td class="weekend">2018-09-15</td>
        <td class="weekend">2018-09-16</td>
      </tr>
</table>
</html>

scheduleList将显示日期,状态和颜色。

我想到要使用

这样的spring标签
        <c:forEach items="${ScheduleList}" var="temp">
            <tr>
                <td>${temp.date}</td>
            </tr>
        </c:forEach>

这只会导致列表仅显示在“星期一”列上。如何以上面列出的方式显示列表?

问题是,当日期是工作日或周末时,我不知道如何将css类动态添加到td中,也不知道如何从一周中的特定日期开始我的列表。例如,如果我的列表以日期2018-09-10(星期一)开始,那么我的表数据应以星期一(如上面的HTML代码段)开头。

有人可以指导我如何解决这个问题吗?

编辑:

            <c:forEach items="${ScheduleList}" var="temp">
            <tr>
                <td style="background-color: ${temp.color};">${temp.date} 
                </td>
            </tr>
            </c:forEach>

此代码会将我在列表中分配的颜色添加到元素中,但是仍然无法解决以水平方式显示列表以及星期一等在星期一以下的日期的问题。

1 个答案:

答案 0 :(得分:0)

我通过if并选择jstl标签解决了这个问题。

代码:

<table>
        <tr>
            <th>MONDAY</th>
            <th>TUESDAY</th>
            <th>WEDNESDAY</th>
            <th>THURSDAY</th>
            <th>FRIDAY</th>
            <th>SATURDAY</th>
            <th>SUNDAY</th>
        </tr>
        <tr>
        <c:choose>
            <c:when test="${startDay==0}">
                <td></td><td></td><td></td><td></td><td></td><td></td>
            </c:when>
            <c:when test="${startDay==6}">
                <td></td><td></td><td></td><td></td><td></td>
            </c:when>
            <c:when test="${startDay==5}">
                <td></td><td></td><td></td><td></td>
            </c:when>
            <c:when test="${startDay==4}">
                <td></td><td></td><td></td>
            </c:when>
            <c:when test="${startDay==3}">
                <td></td><td></td>
            </c:when>
            <c:when test="${startDay==2}">
                <td></td>
            </c:when>
            <c:when test="${startDay==1}">
            </c:when>
        </c:choose>
        <c:forEach items="${ScheduleList}" var="temp">
                <td style="background-color: ${temp.color};color:white;">${temp.date}</td>
                                <c:if test="${temp.dayOfWeek==0}">
                                    </tr>
                                    <tr>
                                </c:if>
        </c:forEach>
        </tr>
    </table>

The table data

所以我开始一行,检查是否在一周中的开始日期,即,周日为0,周日为1,依此类推,直到星期六为6。

检查后,根据星期几创建了连续的<td>。这将导致我需要在表格中显示空格。

此后,我开始打印日期,但还要检查forEach中给定的日期是否为星期日,如果日期为星期日,则关闭上一行并打开新的一行。

我知道这是一个麻烦的解决方案,但只能在给定的时间范围内考虑。如果还有其他人可以使用我的优雅解决方案,而无需更改我从控制器收到的列表或更改数据库,将不胜感激。