實現效果：
![]()
image.png
image.png
簡述
樓層層數以及tab頁里面的房間內容都是通過后臺返回的數據動態(tài)生成的窑业，實現技術layui:tab以及模板引擎
實現代碼
動態(tài)tab頁及豎版樣式
html部分
<div class="layui-card"><div id="roomInfo"></div></div>
模板引擎
<script id="demo" type="text/html">
<div class="layui-tab floor" lay-filter="floorTab">
<ul class="layui-tab-title">
{{# layui.each(d.list, function(index, item){ }}
<li data-index="{{ item.FloorIndex }}" data-floorCode="{{item.InstanceCode}}">
<span>第{{ item.FloorIndex }}層</span>
</li>
{{# }); }}
{{# if(d.list.length === 0){ }}
無數據
{{# } }}
</ul>
<div class="layui-tab-content" >
{{# layui.each(d.list, function(index, item){ }}
<div class="layui-tab-item" id="room{{index}}">
</div>
{{# }); }}
{{# if(d.list.length === 0){ }}
無數據
{{# } }}
</div>
@*樓層平面圖*@
<div id="FloorFileList"></div>
</div>
</script>
css部分（實現豎版tab）
.floor .layui-tab-title li{
display: block;
}
.floor .layui-tab-title{
float: left;
width: 10%;
border-bottom: none;
}
.floor .layui-tab-content{
width: 90%;
margin-left:10%;
}
.floor .layui-tab-title .layui-this{background: #e2e2e2;}/* 增加背景 */
.floor .layui-tab-title .layui-this:after{border: none;}/* 重置 -this無邊框 */
js部分
//樓棟詳情
urp.post("/AM/House/GetBuildingDetailService", { "buildingCode": code }, function (data) {
if (data.Code == 0) {
//樓層信息
urp.post("/AM/House/GetHouseFloorRListService", { "InstanceCode": code }, function (data) {
if (data.code == 0) {
floorData = data.data;
if (data.code == 0) {
var BuildRoom = { //數據
"title": "樓棟房間信息"
, "list": floorData//樓層list
}
var getTpl = demo.innerHTML
, view = document.getElementById('roomInfo');
laytpl(getTpl).render(BuildRoom, function (html) {
view.innerHTML = html;
$("#roomInfo ul").children("li").eq(0).addClass("layui-this");
$(".layui-this").click();
});
}
} else {
return layer.alert(layer.msg);
}
});
}
});
tab事件監(jiān)聽
//tab事件監(jiān)聽
element.on('tab(floorTab)', function (obj) {
var _thisIndex = $(this).attr("data-index");
var _thisFloorCode = $(this).attr("data-floorCode");
//樓層對應房間信息
urp.post("/AM/House/GetHouseRoomZListService", { floorCode: _thisFloorCode }, function (data) {
if (data.code !== 0) return layer.msg(data.Msg);
$("#room" + obj.index).empty();//每次切換tab清空dom
$(".count").text(data.data.length);//獲取總房間數
//生成tab頁內容
for (var i in data.data) {
if (data.data[i].UsageStatusName == "空閑") {
$("#room" + obj.index).append('<a class="layui-btn layui-btn-warm iconDiv" id=' + data.data[i].InstanceCode + '><i class="layui-icon layui-icon-friends"></i><cite>' + data.data[i].RoomName + '</cite></a>')
} else if (data.data[i].UsageStatusName == "在用") {
$("#room" + obj.index).append('<a class="layui-btn layui-btn-normal iconDiv" id=' + data.data[i].InstanceCode + '><i class="layui-icon layui-icon-friends"></i><cite>' + data.data[i].RoomName + '</cite></a>')
} else if (data.data[i].UsageStatusName == "出租") {
$("#room" + obj.index).append('<a class="layui-btn layui-btn-danger iconDiv" id=' + data.data[i].InstanceCode + '><i class="layui-icon layui-icon-friends"></i><cite>' + data.data[i].RoomName + '</cite></a>')
}
};
//樓層div高度（豎版樣式）
var Height = $('.floor .layui-show').height();
var TabHeight = $('.floor').find("li").height() * (floorData.length);
var FinalH = (TabHeight >= Height) ? TabHeight : Height;
$('.floor').find(".layui-tab-content").css("height", FinalH);
//房間點擊事件
$(".floor").find("a").click(function (data) {
$("#RoomForm").parent().removeClass("layui-hide");
$("#RoomForm").parent().addClass("layui-show");
urp.post("/AM/House/GetHouseRoomDetailService", { "roomCode": $(this).attr("id") }, function (data) {
if (data.Code == 0) {
urp.setForm("RoomForm", data.Data);
}
})
})
});
});
后臺接口返回的數據格式如下
樓層：
![]()
image.png
image.png
房間：
![]()
image.png
image.png
有問題可以留言若治，調用接口獲取數據是項目框架方法urp.post（類似ajax物延，只是我們封裝了一下）学搜。
喜歡可關注公眾號“十斤代碼”
公眾號.jpg
回復“領取前端電子書”可免費領取知識哦~~
前端電子書.png
