如何动态生成房态图

在做酒店管理,所需用到大量的房态图时,如何动态生成房态图呢?以下是我所写的代码仅供大家参考。

jsp调用的方法代码:
$(function () {
var nowdata = getNowFormatDate();//今天日期
$("#LiveEndDate").attr('min', '' + nowdata + '');//日期输入不能小于今天
//组合查询
var SectionID = 0;
var FloorNumID = 0;
var FloorID = 0;
var RoomStatusID = 0;
var RoomLevelID = 0;
var RoomNumber = "";
$.getJSON("/GuestRoomDestine/FangTai/SelectDongTai",
{ RoomLevelID: RoomLevelID, SectionID: SectionID, FloorNumID: FloorNumID, FloorID: FloorID, RoomNumber: RoomNumber, RoomStatusID: RoomStatusID },
function (data) {
    for (var i = 0; i < data.length; i++) {
        if (data[i].RoomStatusMC=="空房") {
            $("#CONTENTone")
                    .append('<button id="cg' + i + '"; style=width:160px;height:160px;margin-left:20px;margin-top:38px; οndblclick="shuangjikuaisukaifang(' + data[i].RoomID + ')">'
                   + "<span style='color:red;font-size:20px;margin-left:-40px;'>快</span>" + "&emsp;"
                   + "<span style='color:white;font-size:20px; id='RoomStatusid" + i + "'>" + data[i].RoomStatusMC + "</span><br/>"
                   + "<span style='color:white;font-size:20px;'>" + data[i].FloorMC + "</span><br/>"
                   + "<span style='color:white;font-size:20px;'>" + data[i].RoomLevelMC + "</span><br/>"
                   + "<span style='color:white;font-size:20px;'>房号:" + data[i].RoomNumber + "</span><br/>"
                   + "<span style='color:white;font-size:20px;margin-left:-10px;'>房价:" + data[i].RoomRate +  '<a style="color:yellow">¥</a>' + "</span>"
                   + '</button><span class="hidden" id="fangjianzhuangtai'
                   + data[i].RoomID + '">'
                   + data[i].RoomStatusID
                   + '</span>')
            $("#xiaoji").val(data.length);
            if (data[i].RoomStatusID == 2) {
                $("#RoomStatusid" + i + "").css("color", "white");
                $("#RoomStatusid" + i + "").css("font-size", "20px");
            }
            if (data[i].RoomStatusMC == "现住") {
                $("#CONTENTone").find("#cg" + i).css("background", "#e34dee");
                $("#xianzhu").val(data[i].RoomStatusMC == "现住".length);
            }
            else if (data[i].RoomStatusMC == "维修房") {
                $("#CONTENTone").find("#cg" + i).css("background", "#f6d416");
            }
            else if (data[i].RoomStatusMC == "非出租房") {
                $("#CONTENTone").find("#cg" + i).css("background", "#58faf5");
            }
            else if (data[i].RoomStatusMC == "锁房") {
                $("#CONTENTone").find("#cg" + i).css("background", "#abd543");
            }
            else if (data[i].RoomStatusMC == "预定") {
                $("#CONTENTone").find("#cg" + i).css("background", "#fcf70a");
            }
            else if (data[i].RoomStatusMC == "脏房") {
                $("#CONTENTone").find("#cg" + i).css("background", "#deb52f");
            }
            else {
                $("#CONTENTone").find("#cg" + i).css("background", "#a4e4f2");
            }
        }
        else {
            $("#CONTENTone")
                   .append('<button id="cg' + i + '" style=width:160px;height:160px;margin-left:20px;margin-top:38px; οndblclick="shuangjikuaisukaifang(' + data[i].RoomID + ')">'
                   + "<span style='color:white;font-size:20px;margin-left:-13px;' id='RoomStatusid" + i + "'>" + data[i].RoomStatusMC + "</span><br/>"
                   + "<span style='color:white;font-size:20px;'>" + data[i].FloorMC + "</span><br/>"
                   + "<span style='color:white;font-size:20px;'>" + data[i].RoomLevelMC + "</span><br/>"
                   + "<span style='color:white;font-size:20px;'>房号:" + data[i].RoomNumber + "</span><br/>"
                   + "<span style='color:white;font-size:20px;margin-left:-10px;'>房价:" + data[i].RoomRate + '<a style="color:yellow">¥</a>' + "</span>"
                   + '</button><span class="hidden" id="fangjianzhuangtai'
                   + data[i].RoomID + '">'
                   + data[i].RoomStatusID + '</span>')
            $("#xiaoji").val(data.length);
        }

        if (data[i].RoomStatusMC == "现住") {
            $("#CONTENTone").find("#cg" + i).css("background", "#e34dee");
            $("#xianzhu").val(data[i].RoomStatusMC == "现住".length);
        }
        else if (data[i].RoomStatusMC == "维修房") {
            $("#CONTENTone").find("#cg" + i).css("background", "#f6d416");
        }
        else if (data[i].RoomStatusMC == "非出租房") {
            $("#CONTENTone").find("#cg" + i).css("background", "#58faf5");
        }
        else if (data[i].RoomStatusMC == "锁房") {
            $("#CONTENTone").find("#cg" + i).css("background", "#abd543");
        }
        else if (data[i].RoomStatusMC == "预定") {
            $("#CONTENTone").find("#cg" + i).css("background", "#fcf70a");
        }
        else if (data[i].RoomStatusMC == "脏房") {
            $("#CONTENTone").find("#cg" + i).css("background", "#deb52f");
        }
        else {
            $("#CONTENTone").find("#cg" + i).css("background", "#a4e4f2");
        }
    };
});

运行效果:
在这里插入图片描述
这样你就可以把自己所需要的房间信息显示在房态图上了,是不是很简单呢。

发布了28 篇原创文章 · 获赞 32 · 访问量 9369
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览