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

    加以上样式

    更多相关内容

  • 用于layui table 自定义列

     2021-07-06 10:15:51
    用于layui table 自定义列，保存table模板
    收起

  • layui table设置某一行的字体颜色方法

     2020-10-16 11:14:24
    今天小编就为大家分享一篇layui table设置某一行的字体颜色方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    收起

  • layui table 表格模板按钮的实例代码

     2020-10-16 08:39:35
    今天小编就为大家分享一篇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>
    收起
    展开全文

  • layui table 更新行触发templet重新渲染

     2022-04-28 13:47:40
    更新方法 ... // 这里的字段必须要在 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.zip

     2022-03-14 16:08:25
    一款漂亮有质感的layui后台模板SummerAdmin 漂亮有质感 完整的页面 有良好的设计语言 适合后台二次开发用 多色彩多主题切换 多标签,标签自带完整的关闭功能 表单构建功能,适合快速开发
    收起

  • layUI中table的实现模板

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

    table数据实现模板

    一、目的

     写这篇文章的目的是为了保存这个模板，这个模板主要介绍了如何利用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);
}
    收起
    展开全文
    select

  • layui的table中显示图片方法

     2020-12-10 18:30:17
    图片需要用到模板.templet： ... var table= layui.table; table.render({ elem:'#needstable' ,url:'{:url()}' ,method:'post' ,cellMinWidth:80 ,page:true ,cols:[[ {field:'needs_id',title:
    收起

  • 【Layui】------ Layui Table 点击行选中示例代码

     2021-01-12 00:46:33
    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-table对返回的数据进行转变显示的实例

     2020-12-09 20:41:58
    在使用layui表格时，在ajax请求回来的数据，有时候需要我们处理之后显示 1.比如性别sex这个字段，后台可能返回的是1.或者 2；那我们总不能显示1.和 2，我们需要显示男和女，这里就用到了自定义模板了 [removed] {...
    收起

  • layui.table中加判断(显示|隐藏)

     2022-04-29 14:26:42
    多种情况下的layui.table中加判断(显示|隐藏)
    收起
    javascript html

  • layui自定义模板

     千次阅读 2020-09-18 16:21:49
    templet:自定义列模板，模板遵循 laytpl 语法。这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期字符等，单元格的内容是完全按照数据接口返回的content原样输出...
    收起
    html

  • VUE layui之table数据表格使用详细说明

     2021-09-06 14:38:42
    一：layui官网下载包 二：将解压的文件放入static文件夹（如果没有就在根目录下新建一个） 三：public文件下index.html中引入css及js文件 <!-- 引入 layui.css --> <link rel="stylesheet" href="//...
    收起
    json vue.js

  • layui表格使用自定义模板templet

     万次阅读 2019-07-27 12:27:13
    在前端系列（二）中，layui table模块的优点得到了初步体现：简捷方便，美观优雅，后续的文章将继续对layui table模块进行总结，我们将体会到它的另一个优点：功能丰富。 根据前文步骤，将数据库数据通过layui table...
    收起
    templet

  • layui的table工具栏按钮失效怎么解决？

     2020-12-19 11:49:08
    layui的table工具栏按钮失效怎么解决？发布时间：2020-05-28 16:38:58来源：亿速云阅读：574作者：鸽子1. Html页面号码:搜索新增用户删除用户2. 对应的jslayui.use(['form','layer','table'],function(){var form = ...
    收起

  • html基于layui实现的博客模板.zip

     2021-11-24 16:23:44
    html基于layui实现的博客模板.
    收起

  • lay-ui-模板_layui_

     2021-10-01 17:11:47
    一款非常使用且简单的前端框架，适合简单简单项目和初学者使用
    收起

  • Layui Table 重载封装

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

  • 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="{
    收起

  • Layui Table中整合radio 单选框，选中与取消的方法

     千次阅读 2019-11-21 16:53:39
    场景：加载table时需要指定一个默认的选中，需要在做其他动作时取消选中 尝试了很多方法都无效，最后找到layui论坛相关资料，问题解决 done:function(res,curr,count) { for (let i = 0; i <res.data.length ; i+...
    收起

  • jquery动态赋值layui table数据

     2020-10-29 15:27:43
    table class="layui-table" id="productTest" style="width: 100%;"> <thead> <tr id="template"> <th id="productname">商品名称</th> <th id="nowprice">现价</th&...
    收起
    jquery

  • layui table 实现分页

     千次阅读 2021-06-08 19:48:27
    之前写一个一个关于数据的table表格显示 并带有分页功能，实现过程遇到了很多问题，现抽空总结一下。 使用之前请先详细阅读layer的文档：http://www.layui.com/doc/modules/layer.html 首先下载最新版的layui文件...
    收起

  • layui-table-column-select（layui数据表格可搜索下拉框select）

     2021-01-14 11:46:37
    layuiTableColumnEdit在layui table的基础上对表格列进行扩展：点击单元格显示可搜索下拉列表及日期时间选择器。一、介绍此项目是为了解决layui table表格单元格(column)点击事件中无下拉列表(select)及日期时间选择...
    收起

  • 基于layUI家居商城模板.zip

     2022-07-15 15:40:41
    家居商城模板，核心采用layui。 详情： 1、基于layUI框架开发的前端静态模板，开箱即用。 2、只需要稍加修改变可以完美复用。 3、提供最新的layUI官网地址：https://layui.gitee.io/v2/ 4、参考官网可以快速对...
    收起

  • Layui table 使用记录：table 排序；select多选

     千次阅读 2022-03-23 16:32:22
    Layui table 使用记录 表头筛选并记录 本地保存记录，参考链接：实现layui table筛选框记忆功能 开启表头筛选功能 defaultToolbar: ['filter'] 表头工具 ： 文档 table.render({ //其它参数在此省略 ...
    收起
    javascript html

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,155
精华内容 1,262
热门标签
关键字：

layui table模板