Отображение списка на просмотре, который проходит через модель

Я передал список представлению через свой контроллер.

Код:

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>

Этот код добавит цвет, который я назначил в списке элементу, но проблема отображения списка в горизонтальном порядке с датами понедельника, приходящимися на понедельник и т. д., Все еще не решена.

Кто-нибудь может мне с этим помочь.

Siddhant Sahni 10.09.2018 10:47

Я добавил css динамически (см. Редактирование), но проблема отображения списка по горизонтали все еще актуальна.

Siddhant Sahni 10.09.2018 11:04

сколько дней обычно будет содержать ваш список ScheduleList?

cralfaro 10.09.2018 12:45

он будет содержать 30 дней с текущей даты

Siddhant Sahni 10.09.2018 13:04

хорошо, я боюсь упростить вам нужно будет изменить свой список в вашем контроллере, чтобы отправлять N списков, один за неделю и заказывать с понедельника по воскресенье, или изменить свое представление и вместо использования таблицы используйте div с 7 охватывают элементы внутри так, чтобы они самостоятельно перемещались правильно.

cralfaro 10.09.2018 13:24

Я решил проблему. Это не лучшее решение, но оно работает. Смотрите мой ответ.

Siddhant Sahni 11.09.2018 06:14
0
6
46
1

Ответы 1

Я обошел проблему с помощью 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, является ли данная дата воскресеньем, если дата выпадает на воскресенье, я закрываю предыдущую строку и открываю новую.

Я знаю, что это беспорядочное решение, но могу думать об этом только в заданные сроки. Если у кого-то еще есть другое элегантное решение, которое я мог бы использовать без изменения списка, который я получаю от контроллера, или изменения db, я буду очень признателен.

Привет, я бы сказал, что это не самое чистое решение, я бы рекомендовал использовать div, вам нужно только использовать основной контейнер со 100% шириной, а затем все дочерние div с шириной 100/7, поэтому вам не нужно создавать пустые ячейки (TD) и код будет чище и удобнее в обслуживании.

cralfaro 12.09.2018 14:19

Да, ты прав. Я буду использовать div, будет намного проще.

Siddhant Sahni 13.09.2018 04:45

Другие вопросы по теме