脚本实现课表展示

功能描述：类似于日程表，列出一周内某个时间段的日程。如：本人9：00到10：00有课，那么在课表中9：00-10：00这个时间段呈现蓝色格子（td），当鼠标移到蓝色格子上方时呈现具体事件。如图：

代码实现(MVC3.0)：

后台Action:

View Code

 1     public ActionResult TeacherSchedule()
 2         {
 3             DateTime dt = DateTime.Now;
 4 
 5             var customer = _workContext.CurrentCustomer;
 6             int id = customer.Id;
 7             var TeacherId = from t1 in WTDB.WT_Teacher
 8                             where t1.CustomerID == id
 9                             select t1.TeacherID;
10             if (TeacherId.Count() > 0)
11             {
12                 var UserSchedule = from varSchedule in WTDB.View_Schedule
13                                    where varSchedule.TeacherID  == TeacherId.First() && Convert.ToDateTime(varSchedule.StartTime).Date >= DateTime.Now.Date
14                                    select varSchedule;//个人课表信息
15                 foreach (var TimeList in UserSchedule)
16                 {
17                     for (int n = 0; n <= 7; n++)
18                     {
19                         if (DateTime.Now.AddDays(n).Date == ((DateTime)TimeList.StartTime).Date)
20                         {
21                             for (int i = 0; i <= 23; i++)
22                             {
23                                 if (((DateTime)TimeList.StartTime).Hour == i)
24                                 {
25                                     Random ra = new Random();
26 
27                                     ViewData[n.ToString() + i.ToString()] = n.ToString() + i.ToString();//坐标
28                                     ViewData["start" + n.ToString() + i.ToString()] = Convert.ToDouble(((DateTime)TimeList.StartTime).Minute) / Convert.ToDouble(60);//起始点
29                                     ViewData["end" + n.ToString() + i.ToString()] = Convert.ToDouble(((DateTime)TimeList.StartTime).AddMinutes((double)TimeList.TimeLength).Minute / Convert.ToDouble(60));//结束点
30                                     ViewData["jg" + n.ToString() + i.ToString()] = (int)TimeList.TimeLength / 60;//跨时间
31 
32 
33 
34 
35 
36                                 }
37 
38 
39                             }
40                         }
41                     }
42                 }
43 
44 
45                 return View(UserSchedule);
46             }
47             else
48             {
49                 return View();
50             
51             }
52         }

以上代码只作查询处理，数据库字段StartTime表示日程的起始时间(datetime)，TimeLength：时长（课程上多久/分钟）

1 ViewData[n.ToString() + i.ToString()] = n.ToString() + i.ToString();//坐标
2 ViewData["start" + n.ToString() + i.ToString()] = Convert.ToDouble(((DateTime)TimeList.StartTime).Minute) / Convert.ToDouble(60);//起始点
3 ViewData["end" + n.ToString() + i.ToString()] = Convert.ToDouble(((DateTime)TimeList.StartTime).AddMinutes((double)TimeList.TimeLength).Minute / Convert.ToDouble(60));//结束点
4 iewData["jg" + n.ToString() + i.ToString()] = (int)TimeList.TimeLength / 60;//跨时间

第一行记录开始坐标，第二行记录开始的具体的段，第三行记录结束的段，第四行记录跨的实践段。

下面是主要的前台代码：

首先循环将后台数据添加，添加方法以各自情况来定，本人用的是MVC3.0，就不在这列出来了，总之有多少组数据就得执行下面的PageLoad（）方法多少次。

 1              function PageLoad(Coordinate, Start, End, TimeLength) {//Coordinate起点, Start起点的具体位置, End终点的具体位置, TimeLength跨越的单元格
 2 
 3                  if (Start != 0) {
 4                      TimeLength++;
 5                  
 6                  }
 7          
 8 
 9                      var CoordinateStr = "td" + Coordinate; //坐标ID
10                 
11 
12                  
13                  var vartd = document.getElementById(CoordinateStr);//取td
14                  vartd.style.verticalAlign = "bottom"; //设置从下开始
15                 
16                  var StratStrId = "#"+CoordinateStr + " span";
17                  $(StratStrId).css("background-color", "blue"); //修改颜色 
18                 
19                  if (Start != 0) {
20                      var StartHeight = 30 * Start;
21                      $(StratStrId).css("height", StartHeight.toString()); //修改高度
22                  }
23                  
24                  for (var i = 0; i < TimeLength; i++) {
25                      var frist = Coordinate.substring(0, 1);
26                      var last = Coordinate.substring(1, Coordinate.length);
27                      var CoordinateStrEND = "td" + frist + (last * 1 + i).toString();
28 
29                      var EndStrId = "#" + CoordinateStrEND + " span";
30                      $(EndStrId).css("background-color", "blue"); //修改颜色
31 
32                      if ((i + 1) == TimeLength) {
33                          document.getElementById(CoordinateStrEND).style.verticalAlign = "top";
34 
35                          var StartHeight = 30;
36                          if (End != 0) {
37                              StartHeight = 30 * End;
38 
39 
40                          } $(EndStrId).css("height", StartHeight.toString()); //修改高度
41                         
42                      }
43 
44                  }
45 
46 
47              }

表格设计如下：

View Code

                                            <tr>
                                            <td >01：00</td>
                                           <td id="td01" class="tip"><span style="background-color:White"></span><a href="#"><h1 class="box_ts"></h1></a></td>
                                            <td id="td11" class="tip"><span style="background-color:White"></span><a  href="#"><h1 class="box_ts"></h1></a></td>
                                            <td id="td21" class="tip"><span style="background-color:White"></span><a  href="#"><h1 class="box_ts"></h1></a></td>
                                            <td id="td31" class="tip"><span style="background-color:White"></span><a  href="#"><h1 class="box_ts"></h1></a></td>
                                            
                                            <td id="td41" class="tip"><span style="background-color:White"></span><a  href="#"><h1 class="box_ts"></h1></a></td>
                                            <td id="td51" class="tip"><span style="background-color:White"></span><a  href="#"><h1 class="box_ts"></h1></a></td>
                                            <td id="td61" class="tip"><span style="background-color:White"></span><a  href="#"><h1 class="box_ts"></h1></a></td>
                                            </tr>
                                            <tr>
                                            <td>02：00</td>
                                       <td id="td02" class="tip"><span style="background-color:White"></span><a  href="#"><h1 class="box_ts"></h1></a></td>
                                            <td id="td12" class="tip"><span style="background-color:White"> </span><a  href="#"><h1 class="box_ts"></h1></a></td>
                                            <td id="td22" class="tip"><span style="background-color:White"></span><a  href="#"><h1 class="box_ts"></h1></a></td>
                                            <td id="td32" class="tip"><span style="background-color:White"></span><a  href="#"><h1 class="box_ts"></h1></a></td>
                                            
                                            <td id="td42" class="tip"><span style="background-color:White"></span><a  href="#"><h1 class="box_ts"></h1></a></td>
                                            <td id="td52" class="tip"><span style="background-color:White"></span><a  href="#"><h1 class="box_ts"></h1></a></td>
                                            <td id="td62" class="tip"><span style="background-color:White"></span><a  href="#"><h1 class="box_ts"></h1></a></td>
                                            </tr>

关键在于每一个<tb>的ID比如说“td01”代表的就是今天的1点那个时间段。0表示今天，1表示hour。“td110”表示的就是第二天的10点，以此类推“td301”表示的就是第四天的一点。我是根据查到的时间做处理来找到相应的<td>，并将相应的<td>下的<span>背景颜色设置为blue。

上面所注释的修改高度所指的就是具体的开始时间和结束时间所占这个时间段的百分比来确定<span>的高度，已达到显示具体颜色块的效果。

能够显示时间块以后，接下来要做就的就是当鼠标移动到<td>上时AJAX显示当前时间段的日程。

前台代码：

 1              //            异步查询课程名字 老师名字
 2              $(document).ready(function () {
 3                  $(".tip").mouseover(function () {
 4                      var Id = "#" + this.id + " span";
 5                      var cl = $(Id).css("background-color");
 6                      if (cl != "white") {//判断当前时间块是否有日程
 7 
 8                          var DisplayID = "#" + this.id.toString() + " a h1";
 9                          $.get("http://www.cnblogs.com/Schedule/GetCourseName", { TdId: this.id, time: new Date().getTime() }, function (data) {
10                              if (data != "") {
11 
12                                  $(DisplayID).html(data);
13                                  $(DisplayID).fadeIn('slow');
14 
15 
16                              }
17 
18                          });
19                      }

后台Action

 1         public string GetCourseName(string TdId)
 2         {
 3             var customer = _workContext.CurrentCustomer;
 4             int id = Tchid();
 5             string strdate = TdId.Substring(2, 1);//日期
 6             string strhour = TdId.Substring(3);//小时
 7             string MessInfo = "";
 8             try
 9             {
10                 int date = Convert.ToInt32(strdate);
11                 int hour = Convert.ToInt32(strhour);
12                 var TeachTime = from s1 in WTDB.View_Schedule
13                                 where s1.TeacherID == id && (Convert.ToDateTime(s1.StartTime).Hour <= hour && hour <= Convert.ToDateTime(s1.StartTime).AddMinutes((double)s1.TimeLength).Hour) && Convert.ToDateTime(s1.StartTime).Date == DateTime.Now.AddDays(date).Date//如果日期相等且小时相等
14                                 select new { s1.TeacherID, s1.StartTime, s1.Name };
15                 if (TeachTime.Count() > 0)
16                 {
17                     var TeacherName = from s2 in WTDB.WT_Teacher
18                                       where s2.TeacherID == TeachTime.First().TeacherID
19                                       select s2.CustomerID;
20                     if (TeacherName.Count() > 0)
21                     {
22                         var Name = from s3 in WTDB.Customer
23                                    where s3.Id == TeacherName.First()
24                                    select s3.Username;
25                         string CourseName = TeachTime.First().Name;
26                         if (TeachTime.First().Name.Length > 5)
27                         {
28                             CourseName = TeachTime.First().Name.Substring(0, 5) + "...";
29                         }
30                         MessInfo =CourseName;
31                     }
32                 }
33 
34 
35 
36             }
37             catch
38             {
39                 ;
40 
41             }
42             return MessInfo;
43 
44 
45         }

后台判断当前<td>的ID，做字符串处理提取日期和小时，然后根据时间在数据库查询出日程，最后返回到前台。

有问题可以给我留言，欢迎指教。谢谢

相关阅读:
行高 | line-height (Animations & Transitions)
色域 | @media.color-gamut (Media Queries)
自动换行 | word-wrap (Text)
漫谈死锁
 《金融时间序列分析》第3版-蔡瑞胸
 《广告点击延时反馈建模》
《Google软件测试之道》
《持续集成：软件质量改进和风险降低之道》
《DevOps实践：驭DevOps之力强化技术栈并优化IT运行》
《架构真经：互联网技术架构的设计原则》
原文地址：https://www.cnblogs.com/lvrocky/p/2789325.html