layui动态竖版tab选项卡实现(事件监听)

实现效果： image.png

简述

楼层层数以及tab页里面的房间内容都是通过后台返回的数据动态生成的，实现技术layui:tab以及模板引擎

实现代码

动态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事件监听

//tab事件监听
                    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

有问题可以留言，调用接口获取数据是项目框架方法urp.post（类似ajax，只是我们封装了一下）。
喜欢可关注公众号“十斤代码”

公众号.jpg

回复“领取前端电子书”可免费领取知识哦~~

前端电子书.png