layUI中table的实现模板

最新推荐文章于 2024-04-13 22:05:43 发布

山中水蓝

最新推荐文章于 2024-04-13 22:05:43 发布

阅读量1k

点赞数

分类专栏： JSP 文章标签： layUI table select alyer

本文链接：https://blog.csdn.net/Garnett_zk/article/details/96837238

版权

JSP 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

table数据实现模板

一、目的
二、代码以及效果
3.整个网页的代码
- 1.meeting-control-classroom.jsp代码
- 2.meeting-control-classroom.js代码

一、目的

 写这篇文章的目的是为了保存这个模板，这个模板主要介绍了如何利用layUI框架中的table实现数据的操作。

二、代码以及效果

1. layUI实现表单的页面编辑

1.实现目标

通过点击某个按钮或者其他，触发一个点击事件，从而通过js渲染一个表单，通过layUI中的layer生成对应的按钮。

2.实现效果

在这里插入图片描述

3.代码

    	    	    //多窗口模式，层叠置顶
    	    	    layer.open({
    	    	      type: 1 
    	    	      ,title: '添加会议室信息'
    	    	      ,area: ['600px', '600px']
    	    	      ,shade: 0
    	    	      ,maxmin: true
    	    	      ,offset: [ //为了演示，随机坐标
    	    	        ($(window).height()/4)
    	    	        ,($(window).width()/3)
    	    	      ] 
    	    	      ,content: 
    	    	    	  '<div >'+
	    	  				'<div style="display: inline-block;width:100%;">'+
	    	  					'<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">楼栋名称</span></div>'+
	    	  					'<div style="display: inline-block;"><select class="form-control" id="pandectXmlFile0" onchange="updateTung()">'+
	    	  						select+
	    	  						'</select></div></div>'+
	    	  						
	    	  				'<div style="display: inline-block;width:100%;">'+
	    	  				 		'<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">楼层名称</span></div>'+
	    	  						'<div style="display: inline-block;"><select class="form-control" id="pandectXml0" onchange="updateFloor()">'+
	    	  							'<option></option>'+
	    	  							'</select><input type="hidden" id="buildid"></div></div>'+
	    	  							
  							'<div style="display: inline-block;width:100%;">'+
  										'<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">会议室名称</span></div>'+
		    	  						'<div style="display: inline-block;"><input type="text" id="meetingnameadd"></div>'+
		    	  							'</div>'+
		    	  							
  							'<div style="display: inline-block;width:100%;">'+
			    	  					'<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">会议室类型</span></div>'+
			    	  					'<div style="display: inline-block;"><select id="meetingtypeadd">'+
			    						 '<option value=""></option>'+
			    						 '<option value="1">小型讨论室</option>'+
			    						 '<option value="2">演讲会议室</option>'+
			    						 '<option value="3">视频会议室</option>'+
			    						'</select></div>'+
			    						'</div>'+
			    						
    						'<div style="display: inline-block;width:100%;">'+
			    	  					'<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">会议室规格</span></div>'+
			    	  					'<div style="display: inline-block;"><select id="meetingspecsadd">'+
			    						 '<option value=""></option>'+
			    						 '<option value="1">9人</option>'+
			    						 '<option value="2">20人</option>'+
			    						 '<option value="3">50人</option>'+
			    						 '<option value="4">100人</option>'+
			    						'</select></div>'+
			    						'</div>'+
			    						
    						'<div style="display: inline-block;width:100%;">'+
			    	  					'<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">会议室状态</span></div>'+
			    	  					'<div style="display: inline-block;"><select id="meetingstatusadd">'+
			    						 '<option value=""></option>'+
			    						 '<option value="1">空闲</option>'+
			    						 '<option value="2">使用中</option>'+
			    						 '<option value="3">故障</option>'+
			    						'</select></div>'+
			    						'</div>'+
			    						
    						'<div style="display: inline-block;width:100%;">'+
  										'<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">中控IP</span></div>'+
		    	  						'<div style="display: inline-block;"><input type="text" id="IPadd" onblur="addIP()"></div>'+
		    	  							'</div>'+
	    	    			
	    				  '</div>'
    	    	      ,btn: ['添加', '取消'] //只是为了演示
    	    	      ,yes: function(){
    	    	    	 addmeetingclassroom();
    	    	    	 
    	    	      }
    	    	      ,btn2: function(){
    	    	        layer.closeAll();
    	    	      }
    	    	      
    	    	      ,zIndex: layer.zIndex //重点1
    	    	      ,success: function(layero){
    	    	        layer.setTop(layero); //重点2
    	    	      }
    	    	    });

2.table的操作

1.界面效果

在这里插入图片描述

2.注意事项以及总结

注意：需要注意上图中各个操作在页面中的位置以及在table中的位置
1.如上图所示，添加、查询、删除方法均在table的外面，而修改在table的里面
总结：如果操作在table里面，那么需要用到layUI的table的的监听功能，否则不需要。

代码

//监听工具条
    	table.on('repairTools(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
    	  var data = obj.data; //获得当前行数据
    	  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    	  var tr = obj.tr; //获得当前行 tr 的DOM对象
    	  toreturn(data);
    	});
    	
    	$("#searchbtn").click(search);
    	$("#addbtn").click(add);
    	$("#delbtn").click(del);

3.整个网页的代码

1.meeting-control-classroom.jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <link rel="stylesheet" href="content/bootmetro/dist/assets/css/bootmetro.css" media="all">
    <link rel="stylesheet" href="content/bootmetro/dist/assets/css/bootmetro-icons.css" media="all">
    <link rel="stylesheet" href="content/bootmetro/dist/assets/css/bootmetro-responsive.css" media="all">
    <link rel="stylesheet" href="content/bootmetro/dist/assets/css/bootmetro-ui-light.css" media="all">
    <link rel="stylesheet" href="content/layui-v2.4.5/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="content/css/switch.css" media="all">
    <script type="text/javascript" src="content/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootstrap.min.js"></script>
    <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro-icons-ie7.min.js"></script>
    <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro-charms.min.js"></script>
    <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro-panorama.min.js"></script>
    <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro-pivot.min.js"></script>
    <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro.min.js"></script>
    <script type="text/javascript" src="content/layui-v2.4.5/layui/layui.js"></script>
    <script type="text/javascript" src="content/js/meeting-control-classroom.js"></script>
</head>
<style>
    html {
        height: 100%;
        width: 100%;
        min-width: 1680px;
    }

    body {
        height: 100%;
        width: 100%;
    }

    .ipcall-container {
        width: 17%;
        display: inline-block;
        text-align: center;
        padding-left: 15px;
        padding-top: 15px;
    }

    .meeting-title {
        font-size: 20.5px;
        width: 100%;
        display: block;
        /* color: black !important; */
        text-rendering: optimizelegibility;
        text-decoration: none;
        padding: 2.33px;
    }

    .meeting-title:visited,
    .meeting-title:active,
    .meeting-title:hover {
        background-color: #dddddf;
        text-decoration: none;
    }

    .meeting-li {
        /* color: black !important; */
    }
</style>
<style>
    .newdiv1 {
        background-color: #ffffff;
        height: 340px;
        width: 95%;
        display: inline-block;
        margin-top: 1%;
        margin-left: 2%;
    }

    .newdiv2 {
        height: 300px;
        width: 30%;
        display: inline-block;
        border: 1px solid #1CAFB5;
        border-radius: 14px;
        border-top: 8px solid #0172C7;
        margin-right: 3%;
        margin-top: 1%;
    }

    .newsdiv1 {
        background-color: #ffffff;
        height: 45%;
        width: 100%;
        display: inline-block;
        margin-top: 3%;
        margin-left: 2%;
        border: 1px solid #1CAFB5;
    }

    .newsdiv2 {
        height: 90%;
        width: 97%;
        display: inline-block;
        border: 1px solid #1CAFB5;
        border-radius: 14px;
        border-top: 8px solid #0172C7;
        margin-right: 3%;
        margin-top: 1%;
    }
</style>
<body>
    <div style="padding-left: 15px;background-color:#448aca;color:white;min-height:98px;height:9.69%;">
        <div id="nav-bar">
            <div class="row">
                <div class="span9">
                    <div style="display: inline-block;">
                        <img src="content/images/METRO17.png" width="54" height="54" alt="">
                    </div>

                    <div id="header-container">

                        <div class="dropdown">
                            <a class="header-dropdown" style="color:white;" href="#">
                                会议运维
                            </a>
                        </div>
                        <h5>Avtronsys会议中心管理平台</h5>
                    </div>
					
                </div>
                <div style="display: inline-block;float:right;padding-right:3%;">
					<a href="index2.jsp"><img alt="" src="content/images/会议中心管理平台-设备记录-新_06.png"></a>
				</div>
            </div>
        </div>
    </div>
    <div id="buildnav" style="float:left;background-color:#eee;width:14.4%;height:86%;padding:1%;">
        <p style="width:100%;">
            <input style="width:100%;" type="text" class="search-query" placeholder="搜索">
        </p>
        <h2>会议室列表</h2>
        <p style="height:15px;"></p>
        <ul class="nav metro-nav-list">
            <a class="meeting-title">0号会议厅</a>
            <li>
                <a href="#">1楼</a>
                <ul class="nav">
                    <li><a href="#">101室</a></li>
                    <li><a href="#">102室</a></li>
                    <li><a href="#">103室</a></li>
                    <li><a href="#">104室</a></li>
                    <li><a href="#">105室</a></li>
                    <li><a href="#">106室</a></li>
                    <li><a href="#">107室</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav metro-nav-list">
            <a class="meeting-title">1号会议厅</a>
            <li>
                <a href="#">1楼</a>
                <ul class="nav">
                    <li><a href="#">201室</a></li>
                </ul>
                <a href="#">二楼</a>
                <ul class="nav">
                    <li><a href="#">101室</a></li>
                    <li><a href="#">102室</a></li>
                    <li><a href="#">103室</a></li>
                    <li><a href="#">104室</a></li>
                    <li><a href="#">105室</a></li>
                    <li><a href="#">106室</a></li>
                    <li><a href="#">107室</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div style="float:left;width:83%;height:86%;">
	        <div style="height:40px;margin-top:3%;" class="layui-form-item device-search-bar">
		        <div style="display: inline-block;width:14%;font-size:20px;margin-left:1%;">
		            会议地点&nbsp;<input id="meetingname" style="width:55%;height:100%;font-size:18px;" type="text">
		        </div>
		        
		        <div style="display: inline-block;width:18%;font-size:20px;">
		            <div style="display:inline-block;">会议室类型&nbsp;</div>
					<div style="display:inline-block;width:50%;height:100%;">
					<select id="meetingtype" name="city" style="width:100%;height:100%;display:inline-block;font-size:20px;" >
					  <option value=""></option>
					  <option value="1">小型讨论室</option>
					  <option value="2">演讲会议室</option>
					  <option value="3">视频会议室</option>
					</select> 
					</div>
		        </div>
		        
				<div style="display: inline-block;width:18%;font-size:20px;">
		            <div style="display:inline-block;">会议室规格&nbsp;
		            <input type="hidden" value="<%=session.getAttribute("userid")%>" id="loginUser"/>
		            <input type="hidden" value="<%=session.getAttribute("username")%>" id="username"/>
		            </div>
					<div style="display:inline-block;width:50%;height:100%;">
					<select id="meetingspecs" name="city" style="width:100%;height:100%;display:inline-block;font-size:20px;" >
					  <option value=""></option>
					  <option value="1">9人</option>
					  <option value="2">20人</option>
					  <option value="3">50人</option>
					  <option value="4">100人</option>
					</select> 
					</div>
		        </div>
		        
				<div style="display: inline-block;width:18%;font-size:20px;">
		            <div style="display:inline-block;">会议室状态&nbsp;</div>
					<div style="display:inline-block;width:50%;height:100%;">
					<select id="meetingstatus" name="city" style="width:100%;height:100%;display:inline-block;font-size:20px;" >
					  <option value=""></option>
					  <option value="1">空闲</option>
					  <option value="2">使用中</option>
					  <option value="3">故障</option>
					 
					</select> 
					</div>
		        </div>
	       
		        <div style="display: inline-block;width:20%;float:right;">
		            <button id="searchbtn" class="layui-btn layui-btn-normal" style="background-color: #40C7DA;">搜索</button>
		            <button id="addbtn" class="layui-btn layui-btn-normal" style="background-color: #40C7DA;">添加</button>
					<button id="delbtn" class="layui-btn layui-btn-normal" style="background-color: #40C7DA" data-type="getCheckData">删除</button>
		        </div>
	    </div>
		<div class="layui-inline" style="margin:2px;width:100%;height:800px;">
			 <table class="layui-hide" id="test"></table>
		</div>
    </div>
</body>

</html>

2.meeting-control-classroom.js代码

var builddata ;
var contents = {};
$(selectAllBuild);
layui.use(['table','layer','laydate'],function(){
        	var table = layui.table;
        	var layer = layui.layer;
        	var laydate = layui.laydate;
        	//执行一个laydate实例
        	laydate.render({
        		elem: '#meetingstart' //指定元素
    			,type: 'datetime'
        	});
        	laydate.render({
        		elem: '#meetingend' //指定元素
    			,type: 'datetime'
        	});
        	
        	//条件查询方法开始
    	var search = function(){
    		var one = {};
    		var meetingname = $("#meetingname").val().trim()
    		var val = $("#meetingtype option:selected").val().trim();
    		if(val!=""){
    			one.meetingtype=val;
    		}
    		var meetingspecs = $("#meetingspecs option:selected").val().trim();
    		if(meetingspecs!=""){
    			one.meetingspecs=meetingspecs;
    		}
    		var meetingstatus = $("#meetingstatus option:selected").val().trim();
    		if(meetingstatus!=""){
    			one.meetingstatus=meetingstatus;
    		}
    		layui.table.render({
    			elem: '#test'
    			,height: '500px'
    			,method:'POST'
    			,url: 'selectMeetingClassroomBuildPage' //数据接口
    	        ,skin: 'nob' //行边框风格
    	        ,even: true //开启隔行背景
    			,request: {
    				pageName: 'page',
    				limitName: 'count'
    			}
    			,where: {
    				meetingname:meetingname,
    				meetingtype:one.meetingtype,
    				meetingspecs:one.meetingspecs,
    				meetingstatus:one.meetingstatus
    			}
    			,parseData: function(res){ //res 即为原始返回的数据
    				for(i in res.data){
    					res.data[i].location =res.data[i].tung+"栋"+res.data[i].floor+"楼"+res.data[i].meetingname;
    					if(res.data[i].meetingtype==1){
    						res.data[i].meetingtypes="小型讨论室";
    					}else if(res.data[i].meetingtype==2){
    						res.data[i].meetingtypes="演讲会议室";
    					}else{
    						res.data[i].meetingtypes="视频会议室";
    					}
    					
    					if(res.data[i].meetingspecs==1){
    						res.data[i].meetingspecss="9人";
    					}else if(res.data[i].meetingspecs==2){
    						res.data[i].meetingspecss="20人";
    					}else if(res.data[i].meetingspecs==3){
    						res.data[i].meetingspecss="50人";
    					}else{
    						res.data[i].meetingspecss="100人";
    					}
    					if(res.data[i].meetingstatus==1){
    						res.data[i].meetingstatuss="空闲";
    					}else if(res.data[i].meetingstatus==2){
    						res.data[i].meetingstatuss="使用中";
    					}else{
    						res.data[i].meetingstatuss="故障";
    					}
    				}
                    return {
                        "code": res.state, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": res.data
                        //解析数据列表
                    };
                },
    			page: true //开启分页
    			, cols: [[
    				{type: 'checkbox', fixed: 'left'},
    				{ field: 'location', title: '会议室地点', style:'text-align:center' },
    	            { field: 'meetingtypes', title: '会议室类型', style:'text-align:center' },
    	            { field: 'meetingspecss', title: '会议室规格' , style:'text-align:center'},
    	            { field: 'meetingstatuss', title: '会议室状态' , style:'text-align:center'},
    	            { field: 'ip', title: '中控IP' , style:'text-align:center'},
    	            { title: '操作',  templet:function(d){
    	            	return '<a class="layui-btn layui-btn-xs '+"layui-bg-blue"+'" '+'  onclick=\''+("toreturn")+'('+JSON.stringify(d)+')\'>'+"修改"+'</a>'
    				}, style:'text-align:center'}
    	            ]]
    		});
    		 $("th,.layui-table-header").css({
                 "background-color": "#000000",
                 "color": "white",
                 "text-align": "center"
             }); 
    	}
    	//条件查询方法结束
    	
    	
    	//添加方法开始
    	var add = function(){
    		$.ajax({
    	  		url:"selectMeetingBuildPage",
    	  		data:{"page":0,"count":99999},
    	  		type:"post",
    	  		dataType:"json",
    	  		async:false,
    	  		error:function(){
    	  			console.log("查询错误");
    	  		},
    	  		success:function(res){
    	  			builddata = null;//重置builddata的值，避免多次点击添加按钮，导致builddata的值被重复叠加
    	  			builddata = res.data;
    	  			if(res.data.length <= 0){//如果楼栋表中暂时没有添加数据
    	  				alert("暂无数据");
    	  				return null;
    	  			}
    	  			var tunglist =[];//创建一个list用来接收楼栋下拉框中的值
    	  			
    	  			for(i in res.data){
    	  				if(tunglist.length > 0){
    	  					var labal = false;//用来判断tunglist中是否存在该对象的状态
    	  					for(j in tunglist){
    	  						if(res.data[i].tung ==tunglist[j]){//如果tunglist中已经有了当前楼栋的值
    	  							labal = true;
    	  							break;//break表示跳出当前for循环
    	  						}
    	  						
    	  					}
    	  					if(labal == false){
    	  						tunglist.push(res.data[i].tung);//如果for循环完毕
    	  					}
    	  				}else{
    	  					tunglist.push(res.data[i].tung);
    	  				}
    	  			}
    	  			var select = '<option></option>';
    	  			for(var i =0;i<tunglist.length;i++){
    	  				select += '<option  value="'+tunglist[i]+'">'+tunglist[i]+'</option>'; 
    	  				
    	  			}
    	  			$("#pandectXmlFile"+0).html(select);
    	  			var that = this; 
    	    	    //多窗口模式，层叠置顶
    	    	    layer.open({
    	    	      type: 1 
    	    	      ,title: '添加会议室信息'
    	    	      ,area: ['600px', '600px']
    	    	      ,shade: 0
    	    	      ,maxmin: true
    	    	      ,offset: [ //为了演示，随机坐标
    	    	        ($(window).height()/4)
    	    	        ,($(window).width()/3)
    	    	      ] 
    	    	      ,content: 
    	    	    	  '<div >'+
	    	  				'<div style="display: inline-block;width:100%;">'+
	    	  					'<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">楼栋名称</span></div>'+
	    	  					'<div style="display: inline-block;"><select class="form-control" id="pandectXmlFile0" onchange="updateTung()">'+
	    	  						select+
	    	  						'</select></div></div>'+
	    	  						
	    	  				'<div style="display: inline-block;width:100%;">'+
	    	  				 		'<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">楼层名称</span></div>'+
	    	  						'<div style="display: inline-block;"><select class="form-control" id="pandectXml0" onchange="updateFloor()">'+
	    	  							'<option></option>'+
	    	  							'</select><input type="hidden" id="buildid"></div></div>'+
	    	  							
  							'<div style="display: inline-block;width:100%;">'+
  										'<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">会议室名称</span></div>'+
		    	  						'<div style="display: inline-block;"><input type="text" id="meetingnameadd"></div>'+
		    	  							'</div>'+
		    	  							
  							'<div style="display: inline-block;width:100%;">'+
			    	  					'<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">会议室类型</span></div>'+
			    	  					'<div style="display: inline-block;"><select id="meetingtypeadd">'+
			    						 '<option value=""></option>'+
			    						 '<option value="1">小型讨论室</option>'+
			    						 '<option value="2">演讲会议室</option>'+
			    						 '<option value="3">视频会议室</option>'+
			    						'</select></div>'+
			    						'</div>'+
			    						
    						'<div style="display: inline-block;width:100%;">'+
			    	  					'<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">会议室规格</span></div>'+
			    	  					'<div style="display: inline-block;"><select id="meetingspecsadd">'+
			    						 '<option value=""></option>'+
			    						 '<option value="1">9人</option>'+
			    						 '<option value="2">20人</option>'+
			    						 '<option value="3">50人</option>'+
			    						 '<option value="4">100人</option>'+
			    						'</select></div>'+
			    						'</div>'+
			    						
    						'<div style="display: inline-block;width:100%;">'+
			    	  					'<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">会议室状态</span></div>'+
			    	  					'<div style="display: inline-block;"><select id="meetingstatusadd">'+
			    						 '<option value=""></option>'+
			    						 '<option value="1">空闲</option>'+
			    						 '<option value="2">使用中</option>'+
			    						 '<option value="3">故障</option>'+
			    						'</select></div>'+
			    						'</div>'+
			    						
    						'<div style="display: inline-block;width:100%;">'+
  										'<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">中控IP</span></div>'+
		    	  						'<div style="display: inline-block;"><input type="text" id="IPadd" onblur="addIP()"></div>'+
		    	  							'</div>'+
	    	    			
	    				  '</div>'
    	    	      ,btn: ['添加', '取消'] //只是为了演示
    	    	      ,yes: function(){
    	    	    	 addmeetingclassroom();
    	    	    	 
    	    	      }
    	    	      ,btn2: function(){
    	    	        layer.closeAll();
    	    	      }
    	    	      
    	    	      ,zIndex: layer.zIndex //重点1
    	    	      ,success: function(layero){
    	    	        layer.setTop(layero); //重点2
    	    	      }
    	    	    });
    	  			
    	  			
    	  		}
    	  		
    	  	})
    		
    		
    	  
    	}
    	
    	
    	//添加方法结束
    	
    	//删除方法开始
    	var del = function(){
    		var checkStatus = table.checkStatus('test'); //Test为table的id
    		console.log(checkStatus.data) //获取选中行的数据
    		var teg;
    		if(checkStatus.data.length >0){
    			for(i in checkStatus.data){
    				if(i==0){
    					teg = checkStatus.data[i].meetingid;
    				}else{
    					teg+=","+checkStatus.data[i].meetingid;
    				}
    				
    			}
    		}else{
    			alert("至少选择一条数据");
    			return null;
    		}
    		
    		layer.open({
    			  title:'提示'
    			  ,content: '确定要删除这些会议室吗？,删除会议室的同时会删除会议室对应的设备'
    			  ,btn: ['确定', '取消']
    			  ,yes: function(index, layero){
    			    delmeetingclassroom(teg);
    			    
    			  }
    			  ,btn2: function(index, layero){
    			    //按钮【按钮二】的回调
    			    
    			    //return false 开启该代码可禁止点击该按钮关闭
    			  }
    			  ,cancel: function(){ 
    			    //右上角关闭回调
    			    
    			    //return false 开启该代码可禁止点击该按钮关闭
    			  }
    			});
    		
    	}
    	//删除方法结束
    	
    	//默认查询
        table.render({
            elem: '#test',
            method: 'post',
            height: '500px',
            url: 'selectMeetingClassroomBuildPage',
            skin: 'nob' //行边框风格
            ,
            even: true //开启隔行背景
            ,
            request: {
                pageName: 'page',
                limitName: 'count'
            },
            parseData: function (res) { //res 即为原始返回的数据
            	
            	for(i in res.data){
            		res.data[i].location =res.data[i].tung+"栋"+res.data[i].floor+"楼"+res.data[i].meetingname;
					if(res.data[i].meetingtype==1){
						res.data[i].meetingtypes="小型讨论室";
					}else if(res.data[i].meetingtype==2){
						res.data[i].meetingtypes="演讲会议室";
					}else{
						res.data[i].meetingtypes="视频会议室";
					}
					
					if(res.data[i].meetingspecs==1){
						res.data[i].meetingspecss="9人";
					}else if(res.data[i].meetingspecs==2){
						res.data[i].meetingspecss="20人";
					}else if(res.data[i].meetingspecs==3){
						res.data[i].meetingspecss="50人";
					}else{
						res.data[i].meetingspecss="100人";
					}
					if(res.data[i].meetingstatus==1){
						res.data[i].meetingstatuss="空闲";
					}else if(res.data[i].meetingstatus==2){
						res.data[i].meetingstatuss="使用中";
					}else{
						res.data[i].meetingstatuss="故障";
					}
				}
                return {
                    "code": res.state, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data
                    //解析数据列表
                };
                
            },
            cols: [[
            {type: 'checkbox', fixed: 'left'},
            { field: 'location', title: '会议室地点', style:'text-align:center' },
            { field: 'meetingtypes', title: '会议室类型', style:'text-align:center' },
            { field: 'meetingspecss', title: '会议室规格', style:'text-align:center' },
            { field: 'meetingstatuss', title: '会议室状态', style:'text-align:center' },
            { field: 'ip', title: '中控IP' , style:'text-align:center'},
            { title: '操作',  templet:function(d){
				return '<a class="layui-btn layui-btn-xs '+"layui-bg-blue"+'" '+'  onclick=\''+("toreturn")+'('+JSON.stringify(d)+')\'>'+"修改"+'</a>'
			}, style:'text-align:center'}
            ]],
            page: true
        })
        $("th,.layui-table-header").css({
                "background-color": "#000000",
                "color": "white",
                "text-align": "center"
            }); 
      //监听工具条
    	table.on('repairTools(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
    	  var data = obj.data; //获得当前行数据
    	  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    	  var tr = obj.tr; //获得当前行 tr 的DOM对象
    	  toreturn(data);
    	});
    	
    	$("#searchbtn").click(search);
    	$("#addbtn").click(add);
    	$("#delbtn").click(del);

    });

//楼栋下拉触发事件，用来改变楼层下拉框中的值 
var updateTung  =function(){
	var tung = $("#pandectXmlFile0 option:selected").val();
	if(tung ==""){
		
	}else{
		var floorlist =[];//创建一个list集合用来接收楼层下拉框中的值
		for(i in builddata){
			if(builddata[i].tung==tung){//
				floorlist.push(builddata[i].floor);
			}
		}
		var floordata ='<option></option>';
		for(j in floorlist){
			floordata += '<option  value="'+floorlist[j]+'">'+floorlist[j]+'</option>';
		}
		$("#pandectXml0").html(floordata);
	}
}

//楼层下拉触发事件，用来给buildid赋值
var updateFloor  =function(){
	var floor = $("#pandectXml0 option:selected").val();
	var tung = $("#pandectXmlFile0 option:selected").val();
	var buildid = "";
	if(floor ==""||tung==""){
		
	}else{
		var floorlist =[];
		for(i in builddata){
			if((builddata[i].tung==tung)&&(builddata[i].floor==floor)){
				buildid = builddata[i].buildid;
			}
		}
		$("#buildid").val(buildid);
		console.log("buildid的值"+$("#buildid").val());
	}
}



var addmeetingclassroom = function(){
	var buildid = $("#buildid").val();
	var meetingname = $("#meetingnameadd").val();
	var pandectXmlFile0 = $("#pandectXmlFile0 option:selected").val();
	var pandectXml0 = $("#pandectXml0 option:selected").val();
	var meetingtype = $("#meetingtypeadd option:selected").val();
	var meetingtype = $("#meetingtypeadd option:selected").val();
	var meetingspecs = $("#meetingspecsadd option:selected").val();
	var meetingstatus = $("#meetingstatusadd option:selected").val();
	var ip = $("#IPadd").val();
	if((pandectXmlFile0 == null) || (pandectXmlFile0 =="")){
		alert("楼栋不能为空");
		return null;
	}
	if((pandectXml0 == null) || (pandectXml0 =="")){
		alert("楼层不能为空");
		return null;
	}
	if((meetingname == null) || (meetingname =="")){
		alert("会议室名称不能为空");
		return null;
	}else{
		meetingname = meetingname.trim();//去空格
	}
	if((meetingtype == null) || (meetingtype =="")){
		alert("会议室类型不能为空");
		return null;
	}
	if((meetingspecs == null) || (meetingspecs =="")){
		alert("会议室规格不能为空");
		return null;
	}
	if((meetingstatus == null) || (meetingstatus =="")){
		alert("会议室状态不能为空");
		return null;
	}
	if((ip == null) || (ip =="")){
		alert("中控IP不能为空");
		return null;
	}else{
		ip = ip.trim();
	}
	
	$.ajax({
		url:"insertMeetingClassrooom",
		type:"post",
		dataType:"json",
		data:{
			"buildid":buildid,
			"meetingname":meetingname,
			"meetingtype":meetingtype,
			"meetingspecs":meetingspecs,
			"meetingstatus":meetingstatus,
			"ip":ip
		},
		error: function(){
			console.log("查询出错");
		},
		success:function(data){
			if(data.state == 0){
				layer.closeAll();
				layui.table.render({
	    			elem: '#test'
	    			,height: '500px'
	    			,method:'POST'
	    			,url: 'selectMeetingClassroomBuildPage' //数据接口
	    	        ,skin: 'nob' //行边框风格
	    	        ,even: true //开启隔行背景
	    			,request: {
	    				pageName: 'page',
	    				limitName: 'count'
	    			}
	    			,parseData: function(res){ //res 即为原始返回的数据
	    				for(i in res.data){
	    					res.data[i].location =res.data[i].tung+"栋"+res.data[i].floor+"楼"+res.data[i].meetingname;
	    					if(res.data[i].meetingtype==1){
	    						res.data[i].meetingtypes="小型讨论室";
	    					}else if(res.data[i].meetingtype==2){
	    						res.data[i].meetingtypes="演讲会议室";
	    					}else{
	    						res.data[i].meetingtypes="视频会议室";
	    					}
	    					
	    					if(res.data[i].meetingspecs==1){
	    						res.data[i].meetingspecss="9人";
	    					}else if(res.data[i].meetingspecs==2){
	    						res.data[i].meetingspecss="20人";
	    					}else if(res.data[i].meetingspecs==3){
	    						res.data[i].meetingspecss="50人";
	    					}else{
	    						res.data[i].meetingspecss="100人";
	    					}
	    					if(res.data[i].meetingstatus==1){
	    						res.data[i].meetingstatuss="空闲";
	    					}else if(res.data[i].meetingstatus==2){
	    						res.data[i].meetingstatuss="使用中";
	    					}else{
	    						res.data[i].meetingstatuss="故障";
	    					}
	    				}
	                    return {
	                        "code": res.state, //解析接口状态
	                        "msg": res.msg, //解析提示文本
	                        "count": res.count, //解析数据长度
	                        "data": res.data
	                        //解析数据列表
	                    };
	                },
	    			page: true //开启分页
	    			, cols: [[
	    				{type: 'checkbox', fixed: 'left'},
	    				{ field: 'location', title: '会议室地点', style:'text-align:center' },
	    	            { field: 'meetingtypes', title: '会议室类型', style:'text-align:center' },
	    	            { field: 'meetingspecss', title: '会议室规格' , style:'text-align:center'},
	    	            { field: 'meetingstatuss', title: '会议室状态' , style:'text-align:center'},
	    	            { field: 'ip', title: '中控IP' , style:'text-align:center'},
	    	            { title: '操作',  templet:function(d){
	    	            	return '<a class="layui-btn layui-btn-xs '+"layui-bg-blue"+'" '+'  onclick=\''+("toreturn")+'('+JSON.stringify(d)+')\'>'+"修改"+'</a>'
	    				}, style:'text-align:center'}
	    	            ]]
	    		});
	    		 $("th,.layui-table-header").css({
	                 "background-color": "#000000",
	                 "color": "white",
	                 "text-align": "center"
	             });
	    		 selectAllBuild();
			}
			alert(data.message);
			
		}
	})
}


var toreturn = function(object){
	var buildid = object.buildid;
	var meetingnameupdate = object.meetingname;
	var meetingtypeupdate = object.meetingtype;
	var meetingspecsupdate = object.meetingspecs;
	var meetingstatusupdate = object.meetingstatus;
	var meetingid = object.meetingid;
	var ipupdate = object.ip;
	var tung;
	var floor;
	$.ajax({
  		url:"selectMeetingBuildPage",
  		data:{"page":0,"count":99999},
  		type:"post",
  		dataType:"json",
  		async:false,
  		error:function(){
  			console.log("查询错误");
  		},
  		success:function(res){
  			builddata = null;//重置builddata的值，避免多次点击添加按钮，导致builddata的值被重复叠加
  			builddata = res.data;
  			if(res.data.length <= 0){//如果楼栋表中暂时没有添加数据
  				alert("暂无数据");
  				return null;
  			}
  			var tunglist =[];//创建一个list用来接收楼栋下拉框中的值
  			
  			for(i in res.data){
  				if(buildid == res.data[i].buildid){
  					tung = res.data[i].tung;
  					floor = res.data[i].floor;
  				}
  				if(tunglist.length > 0){
  					var labal = false;//用来判断tunglist中是否存在该对象的状态
  					for(j in tunglist){
  						if(res.data[i].tung ==tunglist[j]){//如果tunglist中已经有了当前楼栋的值
  							labal = true;
  							break;//break表示跳出当前for循环
  						}
  						
  					}
  					if(labal == false){
  						tunglist.push(res.data[i].tung);//如果for循环完毕
  					}
  				}else{
  					tunglist.push(res.data[i].tung);
  				}
  			}
  			var select = '<option></option>';
  			for(var i =0;i<tunglist.length;i++){
  				if(tunglist[i] == tung){
  					select += '<option  value="'+tunglist[i]+'" selected>'+tunglist[i]+'</option>';
  				}else{
  					select += '<option  value="'+tunglist[i]+'">'+tunglist[i]+'</option>';
  				}
  				 
  				
  			}
  			
  			var floorlist =[];//创建一个list集合用来接收楼层下拉框中的值
  			for(i in builddata){
  				if(builddata[i].tung==tung){//
  					floorlist.push(builddata[i].floor);
  				}
  			}
  			
  			var floordata ='<option></option>';
  			for(j in floorlist){
  				if(floor == floorlist[j]){
  					floordata += '<option  value="'+floorlist[j]+'" selected>'+floorlist[j]+'</option>';
  				}else{
  					floordata += '<option  value="'+floorlist[j]+'">'+floorlist[j]+'</option>';
  				}
  				
  			}
  			//设置会议室类型的下拉框值
  			var types =[1,2,3];
  			var typesdata ='<option></option>';
  			for(i in types){
  				var typevalue;
				if(types[i] == 1){
					typevalue ="小型讨论室";
				}else if(types[i] == 2){
					typevalue ="演讲会议室";
				}else{
					typevalue ="视频会议室";
				}
  				if(meetingtypeupdate ==types[i]){
  					typesdata += '<option  value="'+types[i]+'" selected>'+typevalue+'</option>';
  				}else{
  					typesdata += '<option  value="'+types[i]+'">'+typevalue+'</option>';
  				}
  			}
  			
  			//设置会议室规格的下拉框值
  			var specses =[1,2,3,4];
  			var specsesdata ='<option></option>';
  			for(i in specses){
  				var typevalue;
				if(specses[i] == 1){
					typevalue ="9人";
				}else if(specses[i] == 2){
					typevalue ="20人";
				}else if(specses[i] == 3){
					typevalue ="50人";
				}else{
					typevalue ="100人";
				}
  				if(meetingspecsupdate ==specses[i]){
  					specsesdata += '<option  value="'+specses[i]+'" selected>'+typevalue+'</option>';
  				}else{
  					specsesdata += '<option  value="'+specses[i]+'">'+typevalue+'</option>';
  				}
  			}
  			
  		//设置会议室状态的下拉框值
  			var statuses =[1,2,3];
  			var statusdata ='<option></option>';
  			for(i in statuses){
  				var typevalue;
				if(statuses[i] == 1){
					typevalue ="空闲";
				}else if(statuses[i] == 2){
					typevalue ="使用中";
				}else{
					typevalue ="故障";
				}
  				if(meetingstatusupdate ==statuses[i]){
  					statusdata += '<option  value="'+statuses[i]+'" selected>'+typevalue+'</option>';
  				}else{
  					statusdata += '<option  value="'+statuses[i]+'">'+typevalue+'</option>';
  				}
  			}
  			
  			var that = this; 
    	    //多窗口模式，层叠置顶
    	    layer.open({
    	      type: 1 
    	      ,title: '修改会议室信息'
    	      ,area: ['600px', '600px']
    	      ,shade: 0
    	      ,maxmin: true
    	      ,offset: [ //为了演示，随机坐标
    	        ($(window).height()/4)
    	        ,($(window).width()/3)
    	      ] 
    	      ,content: 
    	    	  '<div >'+
	  				'<div style="display: inline-block;width:100%;">'+
	  					'<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">楼栋名称</span></div>'+
	  					'<div style="display: inline-block;"><select class="form-control" id="pandectXmlFile0" onchange="updateTung()">'+
	  						select+
	  						'</select></div></div>'+
	  						
	  				'<div style="display: inline-block;width:100%;">'+
	  				 		'<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">楼层名称</span></div>'+
	  						'<div style="display: inline-block;"><select class="form-control" id="pandectXml0" onchange="updateFloor()">'+
	  						floordata+
	  							'</select><input type="hidden" id="buildid" value="'+buildid+'"></div></div>'+
	  							
						'<div style="display: inline-block;width:100%;">'+
									'<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">会议室名称</span></div>'+
    	  						'<div style="display: inline-block;"><input type="text" id="meetingnameadd" value="'+meetingnameupdate+'"></div>'+
    	  							'</div>'+
    	  							
						'<div style="display: inline-block;width:100%;">'+
	    	  					'<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">会议室类型</span></div>'+
	    	  					'<div style="display: inline-block;"><select id="meetingtypeadd">'+
	    	  					typesdata+
	    						'</select></div>'+
	    						'</div>'+
	    						
					'<div style="display: inline-block;width:100%;">'+
	    	  					'<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">会议室规格</span></div>'+
	    	  					'<div style="display: inline-block;"><select id="meetingspecsadd">'+
	    	  					specsesdata+
	    						'</select></div>'+
	    						'</div>'+
	    						
					'<div style="display: inline-block;width:100%;">'+
	    	  					'<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">会议室状态</span></div>'+
	    	  					'<div style="display: inline-block;"><select id="meetingstatusadd">'+
	    	  					statusdata+
	    						'</select></div>'+
	    						'</div>'+
	    						
					'<div style="display: inline-block;width:100%;">'+
									'<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">中控IP</span></div>'+
    	  						'<div style="display: inline-block;"><input type="text" id="IPadd" onblur="addIP()" value="'+ipupdate+'"><input type="hidden" id="meetingidupdate" value="'+meetingid+'"></div>'+
    	  							'</div>'+
	    			
				  '</div>'
    	      ,btn: ['修改', '取消'] //只是为了演示
    	      ,yes: function(){
    	    	  updatemeetingclassroom();
    	    	 
    	      }
    	      ,btn2: function(){
    	        layer.closeAll();
    	      }
    	      
    	      ,zIndex: layer.zIndex //重点1
    	      ,success: function(layero){
    	        layer.setTop(layero); //重点2
    	      }
    	    });
  			
  			
  		}
  		
  	})

}

var updatemeetingclassroom = function(){
	var buildid = $("#buildid").val();
	var meetingid = $("#meetingidupdate").val();
	var meetingname = $("#meetingnameadd").val();
	var pandectXmlFile0 = $("#pandectXmlFile0 option:selected").val();
	var pandectXml0 = $("#pandectXml0 option:selected").val();
	var meetingtype = $("#meetingtypeadd option:selected").val();
	var meetingtype = $("#meetingtypeadd option:selected").val();
	var meetingspecs = $("#meetingspecsadd option:selected").val();
	var meetingstatus = $("#meetingstatusadd option:selected").val();
	var ip = $("#IPadd").val();
	if((pandectXmlFile0 == null) || (pandectXmlFile0 =="")){
		alert("楼栋不能为空");
		return null;
	}
	if((pandectXml0 == null) || (pandectXml0 =="")){
		alert("楼层不能为空");
		return null;
	}
	if((meetingname == null) || (meetingname =="")){
		alert("会议室名称不能为空");
		return null;
	}else{
		meetingname = meetingname.trim();
	}
	if((meetingtype == null) || (meetingtype =="")){
		alert("会议室类型不能为空");
		return null;
	}
	if((meetingspecs == null) || (meetingspecs =="")){
		alert("会议室规格不能为空");
		return null;
	}
	if((meetingstatus == null) || (meetingstatus =="")){
		alert("会议室状态不能为空");
		return null;
	}
	if((ip == null) || (ip =="")){
		alert("中控IP不能为空");
		return null;
	}else{
		ip = ip.trim();
	}
	
	$.ajax({
		url:"updateMeetingClassroom",
		type:"post",
		dataType:"json",
		data:{
			"buildid":buildid,
			"meetingname":meetingname,
			"meetingtype":meetingtype,
			"meetingspecs":meetingspecs,
			"meetingstatus":meetingstatus,
			"meetingid":meetingid,
			"ip":ip
		},
		error: function(){
			console.log("查询出错");
		},
		success:function(data){
			if(data.state == 0){
				layer.closeAll();
				layui.table.render({
	    			elem: '#test'
	    			,height: '500px'
	    			,method:'POST'
	    			,url: 'selectMeetingClassroomBuildPage' //数据接口
	    	        ,skin: 'nob' //行边框风格
	    	        ,even: true //开启隔行背景
	    			,request: {
	    				pageName: 'page',
	    				limitName: 'count'
	    			}
	    			,parseData: function(res){ //res 即为原始返回的数据
	    				for(i in res.data){
	    					res.data[i].location =res.data[i].tung+"栋"+res.data[i].floor+"楼"+res.data[i].meetingname;
	    					if(res.data[i].meetingtype==1){
	    						res.data[i].meetingtypes="小型讨论室";
	    					}else if(res.data[i].meetingtype==2){
	    						res.data[i].meetingtypes="演讲会议室";
	    					}else{
	    						res.data[i].meetingtypes="视频会议室";
	    					}
	    					
	    					if(res.data[i].meetingspecs==1){
	    						res.data[i].meetingspecss="9人";
	    					}else if(res.data[i].meetingspecs==2){
	    						res.data[i].meetingspecss="20人";
	    					}else if(res.data[i].meetingspecs==3){
	    						res.data[i].meetingspecss="50人";
	    					}else{
	    						res.data[i].meetingspecss="100人";
	    					}
	    					if(res.data[i].meetingstatus==1){
	    						res.data[i].meetingstatuss="空闲";
	    					}else if(res.data[i].meetingstatus==2){
	    						res.data[i].meetingstatuss="使用中";
	    					}else{
	    						res.data[i].meetingstatuss="故障";
	    					}
	    				}
	                    return {
	                        "code": res.state, //解析接口状态
	                        "msg": res.msg, //解析提示文本
	                        "count": res.count, //解析数据长度
	                        "data": res.data
	                        //解析数据列表
	                    };
	                },
	    			page: true //开启分页
	    			, cols: [[
	    				{type: 'checkbox', fixed: 'left'},
	    				{ field: 'location', title: '会议室地点', style:'text-align:center' },
	    	            { field: 'meetingtypes', title: '会议室类型', style:'text-align:center' },
	    	            { field: 'meetingspecss', title: '会议室规格' , style:'text-align:center'},
	    	            { field: 'meetingstatuss', title: '会议室状态' , style:'text-align:center'},
	    	            { field: 'ip', title: '中控IP' , style:'text-align:center'},
	    	            { title: '操作',  templet:function(d){
	    	            	return '<a class="layui-btn layui-btn-xs '+"layui-bg-blue"+'" '+'  onclick=\''+("toreturn")+'('+JSON.stringify(d)+')\'>'+"修改"+'</a>'
	    				}, style:'text-align:center'}
	    	            ]]
	    		});
	    		 $("th,.layui-table-header").css({
	                 "background-color": "#000000",
	                 "color": "white",
	                 "text-align": "center"
	             }); 
			}
			selectAllBuild();
			alert(data.message);
			
		}
	})
}

function addIP(){
  	var ip = $("#IPadd").val();
  	//判断是否为ip格式
  	var ipVerification = /^(?:(?:1[0-9][0-9]\.)|(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:1[0-9][0-9])|(?:2[0-4][0-9])|(?:25[0-5])|(?:[1-9][0-9])|(?:[0-9]))$/;
  	
  	if(!ipVerification.test(ip)){
  		alert('IP地址格式不正确!');
  		$("#IPadd").val("");
  		return false;
  	}
  		
  }

var delmeetingclassroom = function(teg){
	$.ajax({
		url:"deletemeetingclassroom",
		type:"post",
		dataType:"json",
		data:{
			"meetingids":teg
		},
		error: function(){
			console.log("查询出错");
		},
		success:function(data){
			if(data.state == 0){
				layer.closeAll();
				layui.table.render({
	    			elem: '#test'
	    			,height: '500px'
	    			,method:'POST'
	    			,url: 'selectMeetingClassroomBuildPage' //数据接口
	    	        ,skin: 'nob' //行边框风格
	    	        ,even: true //开启隔行背景
	    			,request: {
	    				pageName: 'page',
	    				limitName: 'count'
	    			}
	    			,parseData: function(res){ //res 即为原始返回的数据
	    				for(i in res.data){
	    					res.data[i].location =res.data[i].tung+"栋"+res.data[i].floor+"楼"+res.data[i].meetingname;
	    					if(res.data[i].meetingtype==1){
	    						res.data[i].meetingtypes="小型讨论室";
	    					}else if(res.data[i].meetingtype==2){
	    						res.data[i].meetingtypes="演讲会议室";
	    					}else{
	    						res.data[i].meetingtypes="视频会议室";
	    					}
	    					
	    					if(res.data[i].meetingspecs==1){
	    						res.data[i].meetingspecss="9人";
	    					}else if(res.data[i].meetingspecs==2){
	    						res.data[i].meetingspecss="20人";
	    					}else if(res.data[i].meetingspecs==3){
	    						res.data[i].meetingspecss="50人";
	    					}else{
	    						res.data[i].meetingspecss="100人";
	    					}
	    					if(res.data[i].meetingstatus==1){
	    						res.data[i].meetingstatuss="空闲";
	    					}else if(res.data[i].meetingstatus==2){
	    						res.data[i].meetingstatuss="使用中";
	    					}else{
	    						res.data[i].meetingstatuss="故障";
	    					}
	    				}
	                    return {
	                        "code": res.state, //解析接口状态
	                        "msg": res.msg, //解析提示文本
	                        "count": res.count, //解析数据长度
	                        "data": res.data
	                        //解析数据列表
	                    };
	                },
	    			page: true //开启分页
	    			, cols: [[
	    				{type: 'checkbox', fixed: 'left'},
	    				{ field: 'location', title: '会议室地点', style:'text-align:center' },
	    	            { field: 'meetingtypes', title: '会议室类型', style:'text-align:center' },
	    	            { field: 'meetingspecss', title: '会议室规格' , style:'text-align:center'},
	    	            { field: 'meetingstatuss', title: '会议室状态' , style:'text-align:center'},
	    	            { field: 'ip', title: '中控IP' , style:'text-align:center'},
	    	            { title: '操作',  templet:function(d){
	    	            	return '<a class="layui-btn layui-btn-xs '+"layui-bg-blue"+'" '+'  onclick=\''+("toreturn")+'('+JSON.stringify(d)+')\'>'+"修改"+'</a>'
	    				}, style:'text-align:center'}
	    	            ]]
	    		});
	    		 $("th,.layui-table-header").css({
	                 "background-color": "#000000",
	                 "color": "white",
	                 "text-align": "center"
	             }); 
			}
			selectAllBuild();
			alert(data.message);
			
		}
	})
}



function selectAllBuild(){
	$.get("selectAllMeetingBuilds",{},function(o){
		o = JSON.parse(o);
		for(i in o.data){
			contents[o.data[i].tung]={};	
		}
		for(i in o.data){
			contents[o.data[i].tung][o.data[i].floor]=[];
		}
		
		for(i in o.data){
			if(contents[o.data[i].tung][o.data[i].floor].name==undefined)
				contents[o.data[i].tung][o.data[i].floor].name = [];
			if(contents[o.data[i].tung][o.data[i].floor].id==undefined)
				contents[o.data[i].tung][o.data[i].floor].id = [];
			contents[o.data[i].tung][o.data[i].floor].name.push(o.data[i].meetingname);
			contents[o.data[i].tung][o.data[i].floor].id.push(o.data[i].meetingid);
		}
		console.log(contents);
		drawContents(contents);
	})
	
}

function drawContents(contents){
	$("#buildnav").html("");
	$("#buildnav").append('<p style="width:100%;"><input style="width:100%;" type="text" class="search-query" placeholder="搜索"></p><h2 style="padding-top:3%;">会议室列表</h2><p style="height:15px;"></p>')
	for(var v in contents){
		$("#buildnav").append('<ul data-tung="'+v+'" class="nav metro-nav-list" >'+"<a class='meeting-title'>第"+v+"栋</a><li class='tung'></li></ul>")
		for(var f in contents[v]){
			$("ul[data-tung="+v+"]").find(".tung").append("<a style='color:#4F1ACB;'>"+f+"楼</a><ul data-floor='"+f+"' class='floor nav'></ul>");
			for(c in contents[v][f].id){
				if(contents[v][f].name[c] != undefined)
					$("ul[data-floor="+f+"]").append('<li><a class="room" style="color:#4F1ACB;" data-room=" '+contents[v][f].id[c]+'" data-name="'+contents[v][f].name[c]+'">'+contents[v][f].name[c]+'</a></li>');
			}
		}
	}
	$(".room").click(function(){
		switchcontent($(this).data("room"),$(this).data("name"));
	})
}

function switchcontent(room,name){
	$("#layout").attr("src","toPage?name=meeting-control-classroom&cid="+room+"&cname="+name);
}

山中水蓝

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
layUI中table的实现模板

table数据实现模板一、目的二、代码以及效果1. layUI实现表单的页面编辑1.实现目标2.实现效果3.代码2.table的操作1.界面效果2.注意事项以及总结3.整个网页的代码1.meeting-control-classroom.jsp代码2.meeting-control-classroom.js代码一、目的写这篇文章的目的是为了保存这个模板，这个模板主要介绍了如何利用layUI框...
复制链接

扫一扫