javascript - 设计时间表

Question

有人可以帮我设计学生的时间表吗？下面的屏幕截图数据是从 2 个模型中的数据库中获取的，第一个模型具有该学生的不同开始时间和结束时间，第二个模型具有开始时间、结束时间和类(class)详细信息，在我运行循环的 View 中在 model1 中的每个元素和 model2 中每天的另一个内部循环中，请参阅下面的代码了解详细信息

问题是:我想组织与 outlook 日历相同的日程 View (图 2)生成一个从开始时间到结束时间的正方形，我已经尝试了大多数插件来管理它但没有成功。

谢谢

<div class="row">
<div class="col-md-12">
    <div class="box box-primary">
        <div class="box-body">

            <table class="table table-bordered" style="background-color:white !important;">
                <thead>
                    <tr class="bg-primary align-center">
                        <td class="text-bold" width="10%">Time</td>
                        <td class="text-bold" width="15%">Sunday</td>
                        <td class="text-bold" width="15%">Monday</td>
                        <td class="text-bold" width="15%">Tuesday</td>
                        <td class="text-bold" width="15%">Wednesday</td>
                        <td class="text-bold" width="15%">Thursday</td>
                        <td class="text-bold" width="15%">Saturday</td>
                    </tr>

                </thead>
                @if (Model != null)
                {
                    foreach (var item in Model.TimeSlot)
                    {
                        <tr class="align-center">
                            <td class="bg-info text-bold" style="white-space: nowrap;">@item.BEGIN_TIME_DISP - @item.END_TIME_DISP</td>
                            <td class="drop" id="@("Sun" + item.BEGIN_TIME+item.END_TIME)">
                                @foreach (var Sitem in Model.Schedule.Where(i => i.SUN == "U" && i.BEGIN_TIME == @item.BEGIN_TIME && i.END_TIME == @item.END_TIME))
                                {

                                    <span style="color:blue; font-weight:bold;">
                                        <a href="javascript:void(GetCRNClassRoster('@Sitem.TERM_CODE','@Sitem.COURSE_CRN'));" class="link" title="Click to view class roster">

                                            @Sitem.COURSE_CRN<br />
                                            @Sitem.COURSE_CODE
                                        </a><br />
                                        @Sitem.COURSE_TITLE<br />
                                    </span>
                                    @Sitem.ROOM_CODE
                                    <span style="color:darkred; font-size:10px" class="sDate">
                                        <br />
                                        from @Sitem.START_DATE_CHAR to @Sitem.END_DATE_CHAR<br />
                                    </span>
                                }
                            </td>
                            <td class="drop" id="@("Mon" + item.BEGIN_TIME+item.END_TIME)">
                                @foreach (var Sitem in Model.Schedule.Where(i => i.MON == "M" && i.BEGIN_TIME == @item.BEGIN_TIME && i.END_TIME == @item.END_TIME))
                                {
                                    <span style="color:blue; font-weight:bold;">
                                        <a href="javascript:void(GetCRNClassRoster('@Sitem.TERM_CODE','@Sitem.COURSE_CRN'));" class="link" title="Click to view class roster">
                                            @Sitem.COURSE_CRN<br />
                                            @Sitem.COURSE_CODE
                                        </a><br />
                                        @Sitem.COURSE_TITLE<br />
                                    </span>
                                    @Sitem.ROOM_CODE<br />
                                                    <span style="color:darkred; font-size:10px" class="sDate">

                                                        from @Sitem.START_DATE_CHAR to @Sitem.END_DATE_CHAR<br />
                                                    </span>
                                }
                            </td>
                            <td class="drop" id="@("Tue" + item.BEGIN_TIME+item.END_TIME)">
                                @foreach (var Sitem in Model.Schedule.Where(i => i.TUE == "T" && i.BEGIN_TIME == @item.BEGIN_TIME && i.END_TIME == @item.END_TIME))
                                {
                                    <span style="color:blue; font-weight:bold;">
                                        <a href="javascript:void(GetCRNClassRoster('@Sitem.TERM_CODE','@Sitem.COURSE_CRN'));" class="link" title="Click to view class roster">
                                            @Sitem.COURSE_CRN<br />
                                            @Sitem.COURSE_CODE
                                        </a><br />
                                        @Sitem.COURSE_TITLE<br />
                                    </span>
                                    @Sitem.ROOM_CODE<br />
                                                    <span style="color:darkred; font-size:10px" class="sDate">

                                                        from @Sitem.START_DATE_CHAR to @Sitem.END_DATE_CHAR<br />
                                                    </span>
                                }
                            </td>
                            <td class="drop" id="@("Wed" + item.BEGIN_TIME+item.END_TIME)">
                                @foreach (var Sitem in Model.Schedule.Where(i => i.WED == "W" && i.BEGIN_TIME == @item.BEGIN_TIME && i.END_TIME == @item.END_TIME))
                                {
                                    <span style="color:blue; font-weight:bold;">
                                        <a href="javascript:void(GetCRNClassRoster('@Sitem.TERM_CODE','@Sitem.COURSE_CRN'));" class="link" title="Click to view class roster">
                                            @Sitem.COURSE_CRN<br />
                                            @Sitem.COURSE_CODE
                                        </a><br />
                                        @Sitem.COURSE_TITLE<br />
                                    </span>
                                    @Sitem.ROOM_CODE<br />
                                                    <span style="color:darkred; font-size:10px" class="sDate">

                                                        from @Sitem.START_DATE_CHAR to @Sitem.END_DATE_CHAR<br />
                                                    </span>
                                }
                            </td>
                            <td class="drop" id="@("Thu" + item.BEGIN_TIME+item.END_TIME)">
                                @foreach (var Sitem in Model.Schedule.Where(i => i.THU == "R" && i.BEGIN_TIME == @item.BEGIN_TIME && i.END_TIME == @item.END_TIME))
                                {
                                    <span style="color:blue; font-weight:bold;">
                                        <a href="javascript:void(GetCRNClassRoster('@Sitem.TERM_CODE','@Sitem.COURSE_CRN'));" class="link" title="Click to view class roster">
                                            @Sitem.COURSE_CRN<br />
                                            @Sitem.COURSE_CODE
                                        </a><br />
                                        @Sitem.COURSE_TITLE<br />
                                    </span>
                                    @Sitem.ROOM_CODE                                        <br />
                                                    <span style="color:darkred; font-size:10px" class="sDate">

                                                        from @Sitem.START_DATE_CHAR to @Sitem.END_DATE_CHAR<br />
                                                    </span>
                                }
                            </td>
                            <td class="drop" id="@("Sat" + item.BEGIN_TIME+item.END_TIME)">
                                @foreach (var Sitem in Model.Schedule.Where(i => i.SAT == "S" && i.BEGIN_TIME == @item.BEGIN_TIME && i.END_TIME == @item.END_TIME))
                                {
                                    <span style="color:blue; font-weight:bold;">
                                        <a href="javascript:void(GetCRNClassRoster('@Sitem.TERM_CODE','@Sitem.COURSE_CRN'));" class="link" title="Click to view class roster">
                                            @Sitem.COURSE_CRN<br />
                                            @Sitem.COURSE_CODE
                                        </a><br />
                                        @Sitem.COURSE_TITLE<br />
                                    </span>
                                    @Sitem.ROOM_CODE                                        <br />
                                                    <span style="color:darkred; font-size:10px" class="sDate">

                                                        from @Sitem.START_DATE_CHAR to @Sitem.END_DATE_CHAR<br />
                                                    </span>
                                }
                            </td>

                        </tr>
                    }
                }
            </table>

        </div>
    </div>
</div>

Answer 1

用你现在的<table>布局，您可以使用 rowspan <td> 的属性允许您的元素 Course垂直向下延伸多行。

您当前在数据模型上使用多个查询的 View 代码难以阅读和测试，并且是重复代码。您应该首先创建 View 模型来表示您的显示，在您的情况下，这意味着一个表示表格单元格(包含要显示的 Course 的属性)，一个表示表格行(单元格集合)，一个表示表(行的集合)。

public class CourseVM // represents a table cell
{
    public string Code { get; set; }
    ... // other properties of Course that will be displayed in the view
    public int? TimeSlots { get; set; }
}

TimeSlot属性(因为需要更好的名称)用于确定 Course 的行数(小时)向下延伸。

public class WeekVM // represents a table row
{
    public WeekVM()
    {
        Days = new List<CourseVM>();
        // Hard code for 1 week, but could add a parameter in the constructor to generate a variable number of days
        for (int i = 0; i < 7; i++)
        {
            Days.Add(new CourseVM());
        }
    }
    public List<CourseVM> Days { get; set; }
}

public class ScheduleVM // represents the table
{
    public ScheduleVM(DateTime startDate, TimeSpan startTime, TimeSpan endTime)
    {
        StartDate = startDate.Date.Add(startTime);
        TimeSlots = new List<WeekVM>();
        // Assume 1 hour slots
        int intervals = (int)((endTime - startTime).TotalMinutes) / 60;
        for (int i = 0; i < intervals; i++)
        {
            TimeSlots.Add(new WeekVM());
        }
    }
    public DateTime StartDate { get; set; }
    public List<WeekVM> TimeSlots { get; set; }
}

然后在 Controller 中，初始化ScheduleVM的新实例并根据您收集的 Course 设置其属性

// Set parameters (these may come from parameters in the method
DateTime startDate = new DateTime(2017, 1, 22);
TimeSpan startTime = new TimeSpan(9, 0, 0);
TimeSpan endTime = new TimeSpan(16, 0, 0);
// Get collection of data model
IEnumerable<Course> courses = db.Courses.Where(...);
// Initialize view model
ScheduleVM model = new ScheduleVM(startDate, startTime, endTime);
foreach(Course course in courses)
{
    // Get row and column indexes of the table where this instance needs to be displayed
    int dayIndex = (int)course.StartTime.DayOfWeek;
    int slotIndex = course.StartTime.Hour - startTime.Hours;
    // Determine how any rows this needs to span over
    int timeSlots = (course.EndTime - course.StartTime).Hours;
    // Set view model properties
    var courseVM = model.TimeSlots[slotIndex].Days[dayIndex];
    courseVM.Code = course.Code;
    courseVM.Title = course.Title;
    courseVM.TimeSlots = timeSlots;
    for (int i = 1; i < timeSlots; i++)
    {
        slotIndex++;
        model.TimeSlots[slotIndex].Days[dayIndex].TimeSlots = 0;
    }
}
return View(model);

注意对于 rowspan工作，后续行需要省略相应的 <td>如果上方的单元格延伸到其中，则为元素。在上面的代码中，if block 设置 TimeSlots值 0在后续行中，以便可以在 View 中有条件地检查它。然后 View 是

@model ScheduleVM
....
<table>
    <thead>
        <tr>
            <th></th>
            @for(int i = 0; i < 7; i++)
            {
                <th>@Model.StartDate.AddDays(i).DayOfWeek</th>
            }
        </tr>
    </thead>
    <tbody>
        @foreach(var timeSlot in Model.TimeSlots)
        {           
            <tr>
                <td>@Model.StartDate.AddHours(rowIndex).ToString("hh:mm tt")</td>
                @foreach(var course in timeSlot.Days)
                {
                    if (!course.TimeSlots.HasValue)
                    {       
                        <td></td>
                    }
                    else if (course.TimeSlots > 0)
                    {
                        <td rowspan="@course.TimeSlots">
                            <div class="course">
                                <div>@course.Code</div>
                                .... // other properties of course
                            </div>
                        </td>
                    }   
                }
            </tr>
            rowIndex++;
        }
    </tbody>
</table>

然后你只需要一点 css 来设置它的样式。