做网站必须要认证吗,摄影网站制作,广州定制家具厂,网站排名掉了怎么恢复开发工具与关键技术#xff1a;Visual Studio、MVC
作者#xff1a;幻奏
撰写时间#xff1a;2019.5.30在客房管理的系统中有很多不同的小格子#xff0c;它们分别代表了不同的房间#xff0c;可以动态的显示每间房间的状态#xff0c;这个就是房态图。有很多系统应该都有…开发工具与关键技术Visual Studio、MVC
作者幻奏
撰写时间2019.5.30在客房管理的系统中有很多不同的小格子它们分别代表了不同的房间可以动态的显示每间房间的状态这个就是房态图。有很多系统应该都有类似房态图的东西吧。 大概就是这个样子的。 它就是根据数据库有多少房间就新增多少个格子根据不同的房间状态显示不同的颜色。好了接下来就和你们讲一下我是如何写的如果你有更好的方法请告诉我。 我们要显示房态图当然要用linq查询出它的数据才可以啊。 所以我们的第一步就是查询出它的数据。
public ActionResult selectRoomState(){var linqRoom (from tbRoom in myModel.PW_Roomjoin tbRoomState in myModel.S_RoomState on tbRoom.RoomStateID equals tbRoomState.RoomStateIDjoin tbRoomType in myModel.S_RoomType on tbRoom.RoomTypeID equals tbRoomType.RoomTypeIDselect new{RoomStateID tbRoomState.RoomStateID,RoomNumber tbRoom.RoomNumber,ForShort tbRoomType.ForShort,RoomState tbRoomState.RoomState,ReservetbRoom.Reserve}).ToList();return Json(new { linqRoom }, JsonRequestBehavior.AllowGet);}我这里连了三张表有房间类型的有房间状态的当然最主要的肯定是房间表啦然后返回数据。 第二步就是for循环啦 因为我不单单要加载出和数据库一样的格子还要根据不同的房间状态显示不同的颜色所以我就要加上很多的判断才可以。循环加载出的格子嘛当然是自己写的样式啦我把不同的状态都写了一个类用不同的颜色代表还有客人预定的也是我给它加了一个箭头这样就差不多了。 首先我们写一个post请求控制器那里的方法然后就是for循环然后和linq查询出来的数量不一样就继续新增。
$(function () {$.post(/ShiShiFangTai/FangTai/selectRoomState, function (date) {for (var i 0; i date.linqRoom.length; i) {if (date.linqRoom[i].RoomStateID 1) {if (date.linqRoom[i].Reserve true) {$(#xiaogz).append(div classgreenGZ p-3p date.linqRoom[i].RoomNumber /pp date.linqRoom[i].ForShort /pspan classYDF/span/div)} else {$(#xiaogz).append(div classgreenGZ p-3p date.linqRoom[i].RoomNumber /pp date.linqRoom[i].ForShort /p/div)}} else {if (date.linqRoom[i].RoomStateID 2) {$(#xiaogz).append(div classblueGZ p-3p date.linqRoom[i].RoomNumber /pp date.linqRoom[i].ForShort /p/div)} else {if (date.linqRoom[i].RoomStateID 3) {$(#xiaogz).append(div classpurpleGZ p-3p date.linqRoom[i].RoomNumber /pp date.linqRoom[i].ForShort /p/div)} else {$(#xiaogz).append(div classgrayGZ p-3p date.linqRoom[i].RoomNumber /pp date.linqRoom[i].ForShort /p/div)}}}}});});记得在HTML的div加上ID。因为是新增在那个div里面。 这样就可以一个一个的新增那些小格子了。