时间戳

首页 > 解决方案 > 在视图上显示通过模型传递的列表

javascript - 在视图上显示通过模型传递的列表

问题描述

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

代码：

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 将具有日期、状态和将显示的颜色。

我想过使用弹簧标签，例如

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

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

标签： javascripthtmlcssspringspring-mvc

解决方案

我通过 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>

表数据

所以我开始一行并检查开始日期是否在一周内，即 0 代表星期日，1 代表星期一，依此类推，直到星期六是 6。

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

之后，我开始打印日期，但如果给定日期是星期天，我也会检查 forEach，如果日期是星期天，那么我关闭前一行并打开一个新行。

我知道这是一个混乱的解决方案，但只能在给定的时间范围内想到这一点。如果其他人有另一个优雅的解决方案，我可以在不更改从控制器收到的列表或更改数据库的情况下使用，将不胜感激。

推荐阅读