精华内容
下载资源
问答
  • layui table模板
    2020-11-04 17:51:31
    .layui-table-cell, .layui-table-tool-panel li{
                overflow:visible !important;
            }
    

    加以上样式

    更多相关内容
  • 用于layui table 自定义列,保存table模板
  • 今天小编就为大家分享一篇layui table设置某一行的字体颜色方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui table 表格模板按钮的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 自定义layui table

    2021-07-06 10:12:15
    最近遇到一个需求,要求可以用户自己配置layui Table的列名并可以存成模板,下次进来默认渲染成用户自定义的表格 先看Demo 实现这个需求用到了layui的两个组件 transfer table 具体思路为: 弹窗显示穿梭框,...

    最近遇到一个需求,要求可以用户自己配置layui Table的列名并可以存成模板,下次进来默认渲染成用户自定义的表格
    先看Demo

    动画.gif

    1. 实现这个需求用到了layui的两个组件 transfer table
      具体思路为:
    • 弹窗显示穿梭框,穿梭框是这个表格的所有列名
    • 选中之后,关闭弹窗回调选中的列名
    • 在表格配置中重新render
    • 实现

    2.代码如下

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<link rel="stylesheet" href="layui-v2.5.7/layui/css/layui.css">
    		<script src="js/jquery-3.4.1.min.js"></script>
    		<script src="layui-v2.5.7/layui/layui.js"></script>
    	</head>
    	<body>
    		<div id="transferBox" class="demo-transfer"></div>
    		<br /><br />
    		<button id="getData" class="layui-btn layui-btn-normal">生成</button>
    		<br /><br />
    		<table id="diyTable" lay-filter="test"></table>
    	</body>
    </html>
    
    <script>
    	var colJson = [{
    			field: 'id',
    			title: 'ID',
    			width: 80,
    			sort: true,
    			fixed: 'left'
    		},
    		{
    			field: 'username',
    			title: '用户名',
    			width: 80
    		},
    		{
    			field: 'sex',
    			title: '性别',
    			width: 80,
    			sort: true
    		},
    		{
    			field: 'city',
    			title: '城市',
    			width: 80
    		},
    		{
    			field: 'sign',
    			title: '签名',
    			width: 177
    		},
    		{
    			field: 'experience',
    			title: '积分',
    			width: 80,
    			sort: true
    		},
    		{
    			field: 'score',
    			title: '评分',
    			width: 80,
    			sort: true
    		},
    		{
    			field: 'classify',
    			title: '职业',
    			width: 80
    		},
    		{
    			field: 'wealth',
    			title: '财富',
    			width: 135,
    			sort: true
    		}
    	];
    
    
    	layui.use(['table', 'transfer', 'util', 'layer'], function() {
    		var table = layui.table;
    		var transfer = layui.transfer;
    		var layer = layui.layer;
    		var util = layui.util;
    
    		var tableIns = table.render({
    			elem: '#diyTable',
    			height: 312,
    			url: '/demo/table/user/',
    			toolbar: '#toolbarDemo',
    			defaultToolbar: ['filter', 'exports', 'print'],
    			page: true,
    			cols: [colJson]
    		});
    
    		transfer.render({
    			elem: '#transferBox',
    			data: colJson,
    			parseData: function(res) {
    				return {
    					"value": res.field,
    					"title": res.title
    				}
    			},
    			id: 'transferBox'
    		})
    
    		$("#getData").click(function() {
    			var getData = transfer.getData('transferBox');
    			colJson = [];
    			$(getData).each(function(i, item) {
    				console.log(item);
    				var fieldItem = {
    					field: item.value,
    					title: item.title
    				};
    				colJson.push(fieldItem);
    			})
    
    			var tableIns = table.render({
    				elem: '#diyTable',
    				height: 312,
    				url: '/demo/table/user/',
    				toolbar: '#toolbarDemo',
    				defaultToolbar: ['filter', 'exports', 'print'],
    				page: true,
    				cols: [colJson]
    			});
    		})
    	});
    </script>
    
    
    展开全文
  • 更新方法 ... // 这里的字段必须要在 table.render.cols.filed 有定义,否则无法触发表格渲染 // key 决定是否重新渲染某一列,value 由 templet 里的语句进行逻辑处理 canView: !data.canView }..

    更新方法

    obj.update({
        // 这里的字段必须要在 table.render.cols.filed 有定义,否则无法触发表格渲染
        // key 决定是否重新渲染某一列,value 由 templet 里的语句进行逻辑处理
        canView: !data.canView
    });
    , {field: 'canView', title: '操作', toolbar: '#test-table-operate-barDemo'}

    根据 layui / layuiadmin / layui / lay / modules / table.js 里的定义

    that.eachCols(function(i, item2){
      // 这里需要加上 toolbar
      if(item2.field == key && (item2.templet || item2.toolbar)){
          // 支持字段更新后的兼容 toolbar 的状态刷新
        templet = item2.templet || item2.toolbar;
      }
    }

    如果不修改 table.js ,那就要把 toolbar 改为 templet

    , {field: 'canView', title: '操作', templet: '#test-table-operate-barDemo'}

    这里也说的很详细

    layui table更新一行数据_小星向上的博客-CSDN博客_layui table update需求 点击一行数据后面的处理,只刷新这行数据的内容,不全部刷新updatelayui 给我们提供了update方法,可以用来修改当前行数据//工具条事件table.on('tool(test)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值" var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得...https://blog.csdn.net/sunshinezx8023/article/details/119343923

    展开全文
  • 一款漂亮有质感的layui后台模板SummerAdmin 漂亮有质感 完整的页面 有良好的设计语言 适合后台二次开发用 多色彩多主题切换 多标签,标签自带完整的关闭功能 表单构建功能,适合快速开发
  • layUItable的实现模板

    2019-07-22 11:11:05
    table数据实现模板一、目的二、代码以及效果1. layUI实现表单的页面编辑1.实现目标2.实现效果3.代码2.table的操作1.界面效果2.注意事项以及总结3.整个网页的代码1.meeting-control-classroom.jsp代码2.meeting-...

    一、目的

     写这篇文章的目的是为了保存这个模板,这个模板主要介绍了如何利用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);
    }
    
    
    展开全文
  • 图片需要用到模板.templet: ... var table= layui.table; table.render({ elem:'#needstable' ,url:'{:url()}' ,method:'post' ,cellMinWidth:80 ,page:true ,cols:[[ {field:'needs_id',title:
  • layui table 点击行选中实例//单击行勾选checkbox事件$(document).on("click", ".layui-table-body table.layui-table tbody tr", function () {var index = $(this).attr('data-index');var tableBox = $(this)....
  • layui - 模板引擎

    千次阅读 2020-12-07 14:48:58
    模板layui.use('laytpl', function(){ var laytpl = layui.laytpl; } 参考:https://www.layui.com/doc/modules/laytpl.html 模板语法: // 除函数外,模板以分隔符 {{# 开始,并以 }} 结束 // {{d.field }} ...
  • LayUI简单页面模板.zip

    2020-10-19 13:18:04
    模板适用于Java后端开发的管理系统简单模板(包括简单的登录页面,添加页面,修改页面.......)
  • 在使用layui表格时,在ajax请求回来的数据,有时候需要我们处理之后显示 1.比如性别sex这个字段,后台可能返回的是1.或者 2;那我们总不能显示1.和 2,我们需要显示男和女,这里就用到了自定义模板了 [removed] {...
  • 多种情况下的layui.table中加判断(显示|隐藏)
  • layui自定义模板

    千次阅读 2020-09-18 16:21:49
    templet:自定义列模板模板遵循 laytpl 语法。这是一个非常实用的功能,你可借助它实现逻辑处理,以及将原始数据转化成其它格式,如时间戳转化为日期字符等,单元格的内容是完全按照数据接口返回的content原样输出...
  • 一:layui官网下载包 二:将解压的文件放入static文件夹(如果没有就在根目录下新建一个) 三:public文件下index.html中引入css及js文件 <!-- 引入 layui.css --> <link rel="stylesheet" href="//...
  • layui表格使用自定义模板templet

    万次阅读 2019-07-27 12:27:13
    在前端系列(二)中,layui table模块的优点得到了初步体现:简捷方便,美观优雅,后续的文章将继续对layui table模块进行总结,我们将体会到它的另一个优点:功能丰富。 根据前文步骤,将数据库数据通过layui table...
  • layuitable工具栏按钮失效怎么解决?发布时间:2020-05-28 16:38:58来源:亿速云阅读:574作者:鸽子1. Html页面号码:搜索新增用户删除用户2. 对应的jslayui.use(['form','layer','table'],function(){var form = ...
  • html基于layui实现的博客模板.
  • lay-ui-模板_layui_

    2021-10-01 17:11:47
    一款非常使用且简单的前端框架,适合简单简单项目和初学者使用
  • Layui Table 重载封装

    2020-09-18 15:34:12
    Layui Table 重载封装 近期工作中前端使用到了layuitable ,就避免不了数据的查询,所以就封装可一个通用的重载方法。 后台动态组装条件 layui.define(['table'], function (exports) { var $ = layui.$ , layer...
  • layui table

    2021-08-16 20:57:20
    1.off移除on绑定的事件 2.列checkbox列single属性单选 3.render时changes属性可以动态改变...table class="layui-table" lay-filter="tbUsers" id="tbUsers"> <thead> <tr> <th lay-data="{
  • 场景:加载table时需要指定一个默认的选中,需要在做其他动作时取消选中 尝试了很多方法都无效,最后找到layui论坛相关资料,问题解决 done:function(res,curr,count) { for (let i = 0; i <res.data.length ; i+...
  • table class="layui-table" id="productTest" style="width: 100%;"> <thead> <tr id="template"> <th id="productname">商品名称</th> <th id="nowprice">现价</th&...
  • layui table 实现分页

    千次阅读 2021-06-08 19:48:27
    之前写一个一个关于数据的table表格显示 并带有分页功能,实现过程遇到了很多问题,现抽空总结一下。 使用之前请先详细阅读layer的文档:http://www.layui.com/doc/modules/layer.html 首先下载最新版的layui文件...
  • layuiTableColumnEdit在layui table的基础上对表格列进行扩展:点击单元格显示可搜索下拉列表及日期时间选择器。一、介绍此项目是为了解决layui table表格单元格(column)点击事件中无下拉列表(select)及日期时间选择...
  • 家居商城模板,核心采用layui。 详情: 1、基于layUI框架开发的前端静态模板,开箱即用。 2、只需要稍加修改变可以完美复用。 3、提供最新的layUI官网地址:https://layui.gitee.io/v2/ 4、参考官网可以快速对...
  • Layui table 使用记录 表头筛选并记录 本地保存记录,参考链接:实现layui table筛选框记忆功能 开启表头筛选功能 defaultToolbar: ['filter'] 表头工具 : 文档 table.render({ //其它参数在此省略 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,155
精华内容 1,262
关键字:

layui table模板