開發工具與關鍵技術：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循环出数据库的数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。