脚本实现课表展示脚本实现课表展示

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

文章图片

代码实现(MVC3.0)：
后台Action:

文章图片

文章图片
View Code

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

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

表格设计如下：

文章图片

文章图片
View Code

01：00 02：00

关键在于每一个的ID比如说“td01”代表的就是今天的1点那个时间段。0表示今天，1表示hour。“td110”表示的就是第二天的10点，以此类推“td301”表示的就是第四天的一点。我是根据查到的时间做处理来找到相应的，并将相应的下的背景颜色设置为blue。
【脚本实现课表展示】上面所注释的修改高度所指的就是具体的开始时间和结束时间所占这个时间段的百分比来确定的高度，已达到显示具体颜色块的效果。

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

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

后台Action

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

后台判断当前的ID，做字符串处理提取日期和小时，然后根据时间在数据库查询出日程，最后返回到前台。
有问题可以给我留言，欢迎指教。谢谢
转载于:https://www.cnblogs.com/lvrocky/archive/2012/11/26/2789325.html