开发工具与关键技术: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,Reserve=tbRoom.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 class='greenGZ p-3'><p>" + date.linqRoom[i].RoomNumber + "</p><p>" + date.linqRoom[i].ForShort + "</p><span class='YDF'></span></div>")} else {$("#xiaogz").append("<div class='greenGZ p-3'><p>" + date.linqRoom[i].RoomNumber + "</p><p>" + date.linqRoom[i].ForShort + "</p></div>")}} else {if (date.linqRoom[i].RoomStateID == 2) {$("#xiaogz").append("<div class='blueGZ p-3'><p>" + date.linqRoom[i].RoomNumber + "</p><p>" + date.linqRoom[i].ForShort + "</p></div>")} else {if (date.linqRoom[i].RoomStateID == 3) {$("#xiaogz").append("<div class='purpleGZ p-3'><p>" + date.linqRoom[i].RoomNumber + "</p><p>" + date.linqRoom[i].ForShort + "</p></div>")} else {$("#xiaogz").append("<div class='grayGZ p-3'><p>" + date.linqRoom[i].RoomNumber + "</p><p>" + date.linqRoom[i].ForShort + "</p></div>")}}}}});});

记得在HTML的div加上ID。因为是新增在那个div里面。
这样就可以一个一个的新增那些小格子了。

如何用for循环出数据库的数据相关推荐

  1. 如何用matlab找出一组离散数据中的峰值

    如何用matlab找出一组离散数据中的峰值 对于一组离散数据,我们经常需要找出其中的峰值,如下一组离散数据: x = [1 2 3 4 3 2 1 5 8 9 17 12 11 5 3 2 1 7 1 ...

  2. 在MySQL中如何用SQL命令创建数据库及数据表

    HRELLO 大家好! 上期给大家讲解了,MySQL数据库常用的管理命令.现在,给大家讲解,如何用SQL命令在MySQL中创建一个数据库及数据表. 在学习前,我们首先要了解,SQL命令是什么? SQL ...

  3. shell脚本循环查询数据库实现数据输出到csv

    一.shell脚本和数据文件 1.shell脚本 cat data.txt|while read line domysql -h 10.4.8.133 -u master_data -p'****** ...

  4. mysql 语句 循环入数据库(Navicat)

    mysql循环插入数据库中数据. DELIMITER ;; CREATE PROCEDURE test_insert () BEGIN DECLARE i INT DEFAULT 1;WHILE i& ...

  5. 如何用VBA从EXCEL表取数据?问题1:1次性整体写入,还是循环写入数组呢? 问题2:取得数据后如何定位需要的那个?

    1问题 1.1 如何用VBA从EXCEL表取数据? 有时候只是要把EXCEL表的数据读到VBA里 经常,我们需要读入EXCEL的数据,且能明确的知道每列的意义,并且根据某一列(比如 id列/ inde ...

  6. 如何用开源组件“攒”出一个大数据建模平台?

    写在前面:博主是一只经过实战开发历练后投身培训事业的"小山猪",昵称取自动画片<狮子王>中的"彭彭",总是以乐观.积极的心态对待周边的事物.本人的技 ...

  7. python向数据库写入数据_如何用Python向Mysql中插入数据

    我们使用Python经常会和Postgresql进行搭配,很少将python和mysql进行搭配.下面小编给大家分享如何用Python向Mysql中插入数据. 工具/原料 Pycharm 方法/步骤 ...

  8. jmeter根据循环获取参数_Jmeter--同线程组循环获取数据库数据传递请求

    实例:同线程组从数据库内获取3个uid,把3个uid分别作为不同参数,循环传递给T票UI及发布朋友圈接口.最终结果分别请求了3次接口,并且每个接口请求uid均不一致 jmeter整体结构 1.连接数据 ...

  9. (转)MSSQL中如何用SQL清除所有表的数据(downmoon)?

    有朋友问起:MSSQL中如何用SQL清除所有表的数据?这个需求分三种类型: 第一:只要数据库中表是空的: 第二:表是空的,并且自增长列可以从1开始增长. 第三:表是空的,并且自增长列可以从1开始增长, ...

最新文章

  1. Linus Torvalds 谈居家办公:不要在家中重新搞一个办公室
  2. 记一次CTF实验吧的代码审计
  3. 握手失败_拜托了,看完这篇别再问我什么是TCP三次握手和四次挥手
  4. Emacs高亮设置:Hi-Lock mode笔记
  5. 2的32次方减1用python,第二章python入门
  6. datatable对两个csv的join操作
  7. jsp中获取当前项目名称
  8. LwIP应用开发笔记之十:LwIP带操作系统基本移植
  9. lsm tree java_BasicTreeUI
  10. 弹性计算安全组最佳实践及新特性介绍
  11. Zuul 上传大文件服务报错的问题
  12. 【分享】第48次中国互联网络发展状况统计报告- 数据截止2021年6月
  13. python存钱挑战_52周拯救挑战赛(python),存钱,Python
  14. linux快速返回家目录的命令,linux怎么使用命令返回上一级目录?
  15. 【Seedlabs】Local DNS Attack Lab
  16. java与设计模式-观察者模式
  17. excel打印预览在哪里_易打标条码标签设计打印软件下载_易打标条码标签设计打印软件绿色版下载...
  18. 用python画名字组成的爱心_520用Python画一颗特别的爱心送给她
  19. Android系统启动(上篇)
  20. 文本检测之DBNet,DBNet++

热门文章

  1. 【每日一题】7月9日题目 Color
  2. 牛客网 【每日一题】4月15日 Treepath
  3. [HNOI2016] 大数(莫队)
  4. Codeforces Round #740 (Div. 2, based on VK Cup 2021 - Final (Engine)) A-F全题解
  5. 洛谷P1450:硬币购物(背包、容斥)
  6. YBTOJ:圈套问题(分治法、鸽笼原理)
  7. P4755-Beautiful Pair【笛卡尔树,线段树】
  8. P4248-[AHOI2013]差异【SAM or SA】
  9. P2517-订货【网络流,费用流】
  10. 【树形DP】路径计数机(nowcoder 1103-B)