Add Area2

最新推荐文章于 2019-06-27 11:40:00 发布
最新推荐文章于 2019-06-27 11:40:00 发布
阅读量252 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Leon_Jinhai_Sun/article/details/88819426
版权 
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="itheima" uri="http://itcast.cn/common/"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Smart Lighting Management System</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/vendors/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/vendors/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/admin.css">
  <script src="${pageContext.request.contextPath}/static/assets/vendors/nprogress/nprogress.js"></script>
  <script src="${pageContext.request.contextPath}/static/assets/vendors/jquery/jquery.js"></script>
  <script src="${pageContext.request.contextPath}/static/assets/vendors/bootstrap/js/bootstrap.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/js/bootbox.all.min.js"></script>
  
  <style type="text/css">
  	* {
  	 	font-family: Century Gothic;
  	}
	.main {
		background-image: url(${pageContext.request.contextPath}/img/BG1.jpg);
	}
    #green_bar{
      width:100%;
      height:34.2px;
      background-color: #15a2b3;
    } 
    a{
      text-decoration:none;
    }
    /* tab栏切换area/block/floor/light部分 */
    .tab_dv {
      margin: 5px auto;
      width: 440px;
      height: 42px;
      /*border: 1px solid red;*/
      position: relative;
      text-align:center;
    }    
    .all_info {
      margin: 20px auto;
      width: 820px;
      height: 650px;
      /* border: 1px solid #D7D8DA; */
      /* overflow: hidden; */
    }
    .all_info div {      
      width: 820px;
      height: 650px;
      border: 1px solid #D7D8DA;
      /*float: left;*/
      display: none;
      position: relative;
    }
    .all_info div.selected {
      display: block;
    }
    /* 添加Area部分 */
    tr,td {
      font-family: Century Gothic;
      font-size: 16px;
      color: #686969;
    }
    .area_span {
      display: inline-block;
      width: 820px;
      height: 650px;
      /*border: 1px solid red;*/
      overflow: auto;
    }
    .area table {
        width: 80%;
        margin: 20px auto;
        border-collapse: collapse;
        /*border: 1px solid #D7D8DA;*/
    }
    .area table tr,td {
      text-align: center;
      border: 1px solid #D7D8DA;
      height: 40px;
    }
    .area table input {
      width: 140px;
      height: 22px;
      /*border: 0 none;*/
      outline-style: none;
      border: 1px solid #D7D8DA;
      font-size: 14px;
      font-family: Century Gothic;
    }
    .area_add {
      display: inline-block;
      position: absolute;
      left: 759px;
      top: 25px;
      color: #f10215;
      text-align: center;
      font-size: 21px;
      cursor: pointer;
      width: 40px;
    }
    .area_save {
      display: inline-block;
      position: absolute;
      left: 369px;
      top: 680px;
      color: #008000;
      text-align: center;
      font-size: 21px;
      cursor: pointer;
      width: 80px;
    }        
    /* 添加Block部分 */
    .block_span {
      display: inline-block;
      width: 820px;
      height: 650px;
      /*border: 1px solid red;*/
      overflow: auto;
    }
    .block table {
        /*margin-left: 10px;*/
        width: 45%;
        margin: 20px auto;
        border-collapse: collapse;
        /*border: 1px solid #D7D8DA;*/
    }
    .block table tr,td {
      text-align: center;
      border: 1px solid #D7D8DA;
      height: 40px;
    }
    .block table input {
      width: 140px;
      height: 22px;
      /*border: 0 none;*/
      outline-style: none;
      border: 1px solid #D7D8DA;
      font-size: 14px;
      font-family: Century Gothic;
    }
    .block_add {
      display: inline-block;
      position: absolute;
      left: 759px;
      top: 25px;
      color: #f10215;
      text-align: center;
      font-size: 21px;
      cursor: pointer;
      width: 40px;
    }
    .block_save {
      display: inline-block;
      position: absolute;
      left: 362px;
      top: 669px;
      color: #008000;
      text-align: center;
      font-size: 21px;
      cursor: pointer;
      width: 80px;
    } 
    .area_block {
      /*margin-right: 5px;*/
      position: absolute;
      width: 120px;
      height: 20px;
      /*border: 1px solid red;*/
      display: inline-block;
      top: 20px;
      left: 25px;
    }
    .area_block select {
          width: 145px;
          height: 29px;
          padding: 0.2em 0.4em 0.2em 0.4em;
          vertical-align : middle;
          border: 1px solid #626462;
          -moz-border-radius: 0.2em;
          -webkit-border-radius: 0.2em;
          border-radius: 0.2em;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          font-family: Century Gothic;
          font-size: 12px;
          color: #8D8E92;
          cursor: pointer;
          background: #F4F4F6 url(${pageContext.request.contextPath}/img/select_arrow.png) no-repeat right;
    }
     .area_block select option:hover { 
         background-color: #f80; 
         color: #FFB6C1; 
     }
     /* 添加floor部分 */
    .floor_span {
      display: inline-block;
      width: 820px;
      height: 650px;
      /*border: 1px solid red;*/
      overflow: auto;
      position: absolute;
      top: 0;
      left: 52px;
    }
    .floor table {
        /*margin-left: 10px;*/
        width: 45%;
        margin: 20px auto;
        border-collapse: collapse;
        /*border: 1px solid #D7D8DA;*/
    }
    .floor table tr,td {
      text-align: center;
      border: 1px solid #D7D8DA;
      height: 40px;
    }
    .floor table input {
      /*width: 140px;*/
      width: 125px;
      height: 22px;
      /*border: 0 none;*/
      outline-style: none;
      border: 1px solid #D7D8DA;
      font-size: 14px;
      font-family: Century Gothic;
    }
    .floor_add {
      display: inline-block;
      position: absolute;
      left: 759px;
      top: 25px;
      color: #f10215;
      text-align: center;
      font-size: 21px;
      cursor: pointer;
      width: 40px;
    }
    .floor_save {
      display: inline-block;
      position: absolute;
      left: 362px;
      top: 669px;
      color: #008000;
      text-align: center;
      font-size: 21px;
      cursor: pointer;
      width: 80px;
    } 
    .area_floor {
      /*margin-right: 5px;*/
      position: absolute;
      width: 120px;
      height: 20px;
      /*border: 1px solid red;*/
      display: inline-block;
      top: 19px;
      left: 25px;
    }
    .area_floor select {
          width: 145px;
          height: 29px;
          padding: 0.2em 0.4em 0.2em 0.4em;
          vertical-align : middle;
          border: 1px solid #626462;
          -moz-border-radius: 0.2em;
          -webkit-border-radius: 0.2em;
          border-radius: 0.2em;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          font-family: Century Gothic;
          font-size: 12px;
          color: #8D8E92;
          cursor: pointer;
          background: #F4F4F6 url(${pageContext.request.contextPath}/img/select_arrow.png) no-repeat right;
    }
     .area_floor select option:hover { 
         background-color: #f80; 
         color: #FFB6C1; 
     }
    .block_floor {
      /*margin-right: 5px;*/
      position: absolute;
      width: 120px;
      height: 20px;
      /*border: 1px solid red;*/
      display: inline-block;
      top: 82px;
      left: 25px;
    }
    .block_floor select {
          width: 145px;
          height: 29px;
          padding: 0.2em 0.4em 0.2em 0.4em;
          vertical-align : middle;
          border: 1px solid #626462;
          -moz-border-radius: 0.2em;
          -webkit-border-radius: 0.2em;
          border-radius: 0.2em;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          font-family: Century Gothic;
          font-size: 12px;
          color: #8D8E92;
          cursor: pointer;
          background: #F4F4F6 url(${pageContext.request.contextPath}/img/select_arrow.png) no-repeat right;
    }
     .block_floor select option:hover { 
         background-color: #f80; 
         color: #FFB6C1; 
     }
     /* 添加light部分 */
    .light_span {
      display: inline-block;
      width: 820px;
      height: 650px;
      /*border: 1px solid red;*/
      overflow: auto;
      position: absolute;
      top: 0;
      left: 49px;
    }
    .light table {
        /*margin-left: 10px;*/
        width: 45%;
        margin: 20px auto;
        border-collapse: collapse;
        /*border: 1px solid #D7D8DA;*/
    }
    .light table tr,td {
      text-align: center;
      border: 1px solid #D7D8DA;
      height: 40px;
    }
    .light table input {
      /*width: 140px;*/
      width: 108px;
      height: 22px;
      /*border: 0 none;*/
      outline-style: none;
      border: 1px solid #D7D8DA;
      font-size: 14px;
      font-family: Century Gothic;
    }
    .light_add {
      display: inline-block;
      position: absolute;
      left: 768px;
      top: 25px;
      color: #f10215;
      text-align: center;
      font-size: 21px;
      cursor: pointer;
      width: 40px;
    }
    .light_save {
      display: inline-block;
      position: absolute;
      left: 362px;
      top: 669px;
      color: #008000;
      text-align: center;
      font-size: 21px;
      cursor: pointer;
      width: 80px;
    } 
    .area_light {
      /*margin-right: 5px;*/
      position: absolute;
      width: 120px;
      height: 20px;
      /*border: 1px solid red;*/
      display: inline-block;
      top: 19px;
      left: 6px;
    }
    .area_light select {
          width: 145px;
          height: 29px;
          padding: 0.2em 0.4em 0.2em 0.4em;
          vertical-align : middle;
          border: 1px solid #626462;
          -moz-border-radius: 0.2em;
          -webkit-border-radius: 0.2em;
          border-radius: 0.2em;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          font-family: Century Gothic;
          font-size: 12px;
          color: #8D8E92;
          cursor: pointer;
          background: #F4F4F6 url(${pageContext.request.contextPath}/img/select_arrow.png) no-repeat right;
    }
     .area_light select option:hover { 
         background-color: #f80; 
         color: #FFB6C1; 
     }
    .block_light {
      /*margin-right: 5px;*/
      position: absolute;
      width: 120px;
      height: 20px;
      /*border: 1px solid red;*/
      display: inline-block;
      top: 82px;
      left: 6px;
    }
    .block_light select {
          width: 145px;
          height: 29px;
          padding: 0.2em 0.4em 0.2em 0.4em;
          vertical-align : middle;
          border: 1px solid #626462;
          -moz-border-radius: 0.2em;
          -webkit-border-radius: 0.2em;
          border-radius: 0.2em;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          font-family: Century Gothic;
          font-size: 12px;
          color: #8D8E92;
          cursor: pointer;
          background: #F4F4F6 url(${pageContext.request.contextPath}/img/select_arrow.png) no-repeat right;
    }
     .block_light select option:hover { 
         background-color: #f80; 
         color: #FFB6C1; 
     }
    .floor_light {
      /*margin-right: 5px;*/
      position: absolute;
      width: 120px;
      height: 20px;
      /*border: 1px solid red;*/
      display: inline-block;
      top: 145px;
      left: 6px;
    }
    .floor_light select {
          width: 145px;
          height: 29px;
          padding: 0.2em 0.4em 0.2em 0.4em;
          vertical-align : middle;
          border: 1px solid #626462;
          -moz-border-radius: 0.2em;
          -webkit-border-radius: 0.2em;
          border-radius: 0.2em;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          font-family: Century Gothic;
          font-size: 12px;
          color: #8D8E92;
          cursor: pointer;
          background: #F4F4F6 url(${pageContext.request.contextPath}/img/select_arrow.png) no-repeat right;
    }
     .floor_light select option:hover { 
         background-color: #f80; 
         color: #FFB6C1; 
     }
  </style>
  <script>
  	 $(function(){
  		  // 初始化Area信息
  		  getAreaSelections();
  		  
  		  function getAreaSelections(){	
  		  	  // 初始化Area信息
  		      $.ajax({	
  		    		type : "POST",
  		    		dataType : "JSON",
  		    		url : "${pageContext.request.contextPath}/getCommunityInfo.action",
  		    		contentType:"application/json;charset=UTF-8",
  		    		//data : areaParams,
  		    		success : function(data){
  	    			  //console.log(data);    			 
  				      var areaHtml = "";
  				      if(data!=null && data.length>0){
  				        $(data).each(function(index,item){
  				          var communityId = item["communityId"];
  				          var communityName = item["communityName"];
  				          areaHtml += "<option value='"+communityId+"' selected='selected'>"+communityName+"</option>";
  				        });
  				      }	     
  				      // console.log(areaHtml);	     
  				      $("#s_area_block").html(areaHtml);
  				      $("#s_area_floor").html(areaHtml);
  				      $("#s_area_light").html(areaHtml);
  		    		}	
  		    	});
  		  }
  		  
  		  function getInitialBlockSelections(){	
  			  var communityId = $("#s_area_block option:selected").val().trim();
  	  		  //console.log("communityId",communityId);
  			  var params = {"communityId":communityId};
  			  //console.log("params",params);
  			  var paramsStr = params = JSON.stringify(params);
  		  	  // 初始化Area信息
  		      $.ajax({	
  		    		type : "POST",
  		    		dataType : "JSON",
  		    		url : "${pageContext.request.contextPath}/getBlockInfoByCommunityId.action",
  		    		contentType:"application/json;charset=UTF-8",
  		    		data : paramsStr,
  		    		success : function(data){
  					  //console.log(data);    			 
  				      var blockHtml = "";
  				      if(data!=null && data.length>0){
  				        $(data).each(function(index,item){	
  				          if(item){			        	  
  					          var blockId = item["blockId"];
  					          var blockName = item["blockName"];
  					          if(blockId!=null && blockId!=undefined){			        	  
  					          	 blockHtml += "<option value='"+blockId+"' selected='selected'>"+blockName+"</option>";
  					          }
  				          }
  				        });
  					    // console.log(blockHtml);
  					    $("#s_block_floor").html(blockHtml);
  					    $("#s_block_light").html(blockHtml);
  					    getInitialLightSelections();
  				      }	
  		    		}	
  		    	});
  		  }
  		  
  		  function getInitialLightSelections(){	
  			  var blockId = $("#s_block_light option:selected").val();
  			  //console.log("blockId",blockId);
  			  var params = {"blockId":blockId};
  			  //console.log("params",params);
  			  paramsStr = JSON.stringify(params);
  		  	  // 初始化Area信息
  		      $.ajax({	
  		    		type : "POST",
  		    		dataType : "JSON",
  		    		url : "${pageContext.request.contextPath}/getFloorInfoByBlockId.action",
  		    		contentType:"application/json;charset=UTF-8",
  		    		data : paramsStr,
  		    		success : function(data){
  					  //console.log(data);    			 
  				      var lightHtml = "";
  				      if(data!=null && data.length>0){
  				        $(data).each(function(index,item){	
  				          if(item){			        	  
  					          var floorId = item["floorId"];
  					          var floorName = item["floorName"];
  					          if(floorId!=null && floorId!=undefined){		        	  
  					        	  lightHtml += "<option value='"+floorId+"' selected='selected'>"+floorName+"</option>";
  					          }
  				          }
  				        });
  					    // console.log(lightHtml);
  					    $("#s_floor_light").html(lightHtml);
  				      }	
  		    		}	
  		    	});
  		  }
  		  
  		  function changeLightAreaSelections(communityId){	
  			  //console.log("communityId",communityId);
  			  var params = {"communityId":communityId};
  			  //console.log("params",params);
  			  var paramsStr = JSON.stringify(params);
  		  	  // 初始化Area信息
  		      $.ajax({	
  		    		type : "POST",
  		    		dataType : "JSON",
  		    		url : "${pageContext.request.contextPath}/getBlockInfoByCommunityId.action",
  		    		contentType:"application/json;charset=UTF-8",
  		    		data : paramsStr,
  		    		success : function(data){
  					  //console.log(data);    			 
  				      var blockHtml = "";
  				      if(data!=null && data.length>0){
  				        $(data).each(function(index,item){	
  				          if(item){			        	  
  					          var blockId = item["blockId"];
  					          var blockName = item["blockName"];
  					          if(blockId!=null && blockId!=undefined){			        	  
  					          	 blockHtml += "<option value='"+blockId+"' selected='selected'>"+blockName+"</option>";
  					          }
  				          }
  				        });
  					    // console.log(blockHtml);
  					    $("#s_block_light").html(blockHtml);
  					    getInitialLightSelections();
  				      }	
  		    		}	
  		    	});
  		  }
  		  
  		  function changeLightBlockSelections(blockId){	
  			  //console.log("blockId",blockId);
  			  var params = {"blockId":blockId};
  			  //console.log("params",params);
  			  var paramsStr = JSON.stringify(params);
  		  	  // 初始化Area信息
  		      $.ajax({	
  		    		type : "POST",
  		    		dataType : "JSON",
  		    		url : "${pageContext.request.contextPath}/getFloorInfoByBlockId.action",
  		    		contentType:"application/json;charset=UTF-8",
  		    		data : paramsStr,
  		    		success : function(data){
  					  //console.log(data);    			 
  				      var lightHtml = "";
  				      if(data!=null && data.length>0){
  				        $(data).each(function(index,item){	
  				          if(item){			        	  
  					          var floorId = item["floorId"];
  					          var floorName = item["floorName"];
  					          if(floorId!=null && floorId!=undefined){		        	  
  					        	  lightHtml += "<option value='"+floorId+"' selected='selected'>"+floorName+"</option>";
  					          }
  				          }
  				        });
  				      }	
  					    // console.log(lightHtml);
  					    $("#s_floor_light").html(lightHtml);
  		    		}	
  		    	});
  		  }
  		 
  	      // tab栏切换area/block/floor/light部分
  	      $(function(){
  	          // 获取所有的li标签,添加鼠标进入事件
  	          $(".tab_dv>button").click(function(){
  	              // 设置当前鼠标进入的li添加类样式,同时移除当前li的所有兄弟元素
  	              // 类样式
  	              $(this).removeClass("btn-success btn-info").addClass("btn-success").siblings("button").removeClass("btn-success btn-info");
  	              $(this).siblings("button").addClass("btn-info");
  	              // 设置鼠标进入的li对应的div的样式
  	              // 获取当前鼠标进入的li的索引值
  	              var index = $(this).index();
  	              $(".all_info>div:eq("+index+")").addClass("selected")
  	                                              .siblings('div')
  	                                              .removeClass('selected');
  	              getAreaSelections();
  	              getInitialBlockSelections();
  	          });
  	      });
  	      
  	     /* 添加Area部分 */
  		//新版本jquery使用
  		$(document).on("click", ".area_add", function() {
	          var trcomp="<tr><td><input name='areaName'></input></td><td><input name='areaAddress' /></td><td><a href='javascript:;' class='delete_area_row'><font color='red'>Delete</font></a></td></tr>";
  	          $("#area_table tr:last-child").after(trcomp);
  	          
  		});	
  	     
  		$(document).on("click", ".delete_area_row", function() {
  			   var currentObj = $(this);
		       bootbox.confirm({ 
			        size: "small",
			        message: "<b>Do you really want to <b style='color:#d9534f'>delete</b> it?</b>", 
			        callback: function(result){
			           if(result){							
			              var tr=currentObj.get(0).parentNode.parentNode;
			              var tbody=tr.parentNode;
			              tbody.removeChild(tr);
			           }
			        }
		       });
		});
  		
  		
  		$(function(){
  			$(".area_save").click(function(){
  				var tableObj = $("#area_table");
    	          var columnTitle = tableObj.find("th");
      	          var flag = true;
      	          
      	          var trsData = tableObj.find("tr:gt(0)");
      	          var areaParams = [];
      	          trsData.each(function(row,trData){
    	  	        	// console.log(row,trData);
    	  	        	var inputsData = $(trData).find("td input");
    	  	       		// console.log(inputsData);
    	  	       	    var areaObj = {};
    	  	       	    var array = [];
    	  	       		
    	  	       	    inputsData.each(function(index,inputObj){
    	  	       	   			var errMessage = "row " + (row+1);
    	  	       	   			// 第一列是areaAddress字段
    	  	       	   			if((index+1)%2==1){
    	  	       	   			   //console.log("index",index);
    	  	       	   			   errMessage += " areaName is invalid!";
    	  	       	   			}else{
    	  	                        // 偶数列则是
    	  	                         //console.log("index",index);
    	  	                        errMessage += " areaAddress is invalid!";
    	  	                    }
    	  	       	   			
    			  	       	   	if($(inputObj)[0]==undefined || $(inputObj).val()==''){
    		                        // 如果有数据为空,则提示并直接返回
    		                        // 注意这里返回没有用
    		                        // $.messager.alert('Messager',errMessage,'info');
	    		       		         bootbox.alert({ 
	    		       		          size: "small",
	    		       		          title: "Message",
	    		       		          message: "<b style='color:red'>"+errMessage+"</b>"
	    		       		         });
    		                        flag = false;
    		                    }
    			  	       	   	

    		                      // console.log(index,inputObj);
    		                      // console.log(index,$(inputObj).val());
    		                      array.push($(inputObj).val());   
    		                      // 使用jquery进行多行表格数据验证
    	  	       	    });
    	                  // console.log(array);
    	                  var areaObj = {"communityName":array[0].trim(),"communityAddress":array[1]};
    	                  // console.log(areaObj);
    	                  // 如果有数据为空则在这里返回
    	                  if(flag){
    	                     areaParams.push(areaObj);                  
    	                  } 
    	                  // console.log("areaParams",areaParams);
    	                  // console.log(areaParams.length);
    	                  // 如果flag为false就直接退出
      	          });      	          
   	                  if(!flag || areaParams.length==0){
   	                    // console.log('0000');
   	                    // 这是参数为空的
   	                    // console.log("AreaParams value is invalid!");    	
   	                    bootbox.alert({ 
	                    	  size: "small",
	                    	  title: "Message",
	                    	  message: "<b style='color:red'>Parameter cannot be empty!</b>"
	                    	 });
	                    	return;
   	                  }else{
   	                    // console.log('AreaParam is right.');   
   	                    // console.log(areaParams);
   	                    var areaParamsStr = JSON.stringify(areaParams);
						// console.log(areaParamsStr);
		                $.ajax({	
	                		type : "POST",
	                		dataType : "JSON",
	                		url : "${pageContext.request.contextPath}/addCommunityInfo.action",
	                		contentType:"application/json;charset=UTF-8",
	                		data : areaParamsStr,
	                		success : function(data){
	                			// console.log(data.message);
	                			// $.messager.alert('Messager',data.message,'info');
	    	                    bootbox.alert({ 
	   	                    	  size: "small",
	   	                    	  title: "Message",
	   	                    	  message: "<b style='color:red'>"+data.message+"</b>"
	   	                    	 });
	                		}	
		                });
   	                  }
  			});
  		});
  		
 	     /* 添加Block部分 */
  		//新版本jquery使用
  		$(document).on("click", ".block_add", function() {
	          var trcomp="<tr><td><input name='areaName'></input></td><td><a href='javascript:;' class='delete_block_row'><font color='red'>Delete</font></a></td></tr>";
  	          $("#block_table tr:last-child").after(trcomp);
  	          
  		});
 	     
  		$(document).on("click", ".delete_block_row", function() {
			   var currentObj = $(this);
		       bootbox.confirm({ 
			        size: "small",
			        message: "<b>Do you really want to <b style='color:#d9534f'>delete</b> it?</b>", 
			        callback: function(result){
			           if(result){							
			              var tr = currentObj.get(0).parentNode.parentNode;
			              var tbody = tr.parentNode;
			              tbody.removeChild(tr);
			           }
			        }
		       });
		});
  		
  		$(function(){
  			$(".block_save").click(function(){
  				var communityId = $("#s_area_block option:selected").val().trim();
                if(communityId==undefined || communityId==''){
                    // $.messager.alert('Messager','Area value is invalid!','info');
	                bootbox.alert({ 
	                 	  size: "small",
	                 	  title: "Message",
	                 	  message: "<b style='color:red'>Area value is invalid!</b>"
	                });
                    return;
                }
                communityId = parseInt(communityId);
                // console.log("communityId",communityId);
                var tableObj = $("#block_table");
                var columnTitle = tableObj.find("th");
                var flag = true;
                
                // gt(0)是大于0也就是从第二行开始,因为第一行是表头
                var trsData = tableObj.find("tr:gt(0)");
                var blockParams = [];
                trsData.each(function(row,trData){
                	var inputsData = $(trData).find("td input");
                	var blockObj = {};
                	var array = [];
                	inputsData.each(function(index,inputObj){
                		var errMessage = "row " + (row+1);
                		errMessage += " blockName is invalid!";
                        if($(inputObj)[0]==undefined || $(inputObj).val()==''){
                            // 如果有数据为空,则提示并直接返回
                            // 注意这里返回没有用
                            // $.messager.alert('Messager',errMessage,'info');
        	                bootbox.alert({ 
      	                 	  size: "small",
      	                 	  title: "Message",
      	                 	  message: "<b style='color:red'>"+errMessage+"</b>"
      	                	});
                            flag = false;
                        }
                        array.push($(inputObj).val());                        
                	});
                	// console.log(array);
                	var blockObj = {"communityId":communityId,"blockName":array[0]};
                	// console.log(blockObj);
                	// 如果用户输入的数据完整就可以添加到数组中
                    if(flag){
                        blockParams.push(blockObj);             
                     }              	
                });
              	// console.log(blockParams);
              	// console.log(blockParams.length);
                if(!flag || blockParams.length==0){
                    // 这是参数为空的
                    console.log(blockParams);
                    // $.messager.alert('Messager','Parameter cannot be empty!','info');
	                bootbox.alert({ 
	                 	  size: "small",
	                 	  title: "Message",
	                 	  message: "<b style='color:red'>Parameter cannot be empty!</b>"
	                });
                    return;
                }else{
                    // 这个是数据完整的
                    console.log(blockParams);
                    var blockParamsStr = JSON.stringify(blockParams);
                    console.log(blockParamsStr);
                    $.ajax({	
                  		type : "POST",
                  		dataType : "JSON",
                  		url : "${pageContext.request.contextPath}/addBlockInfo.action",
                  		contentType:"application/json;charset=UTF-8",
                  		data : blockParamsStr,
                  		success : function(data){
                  			console.log(data.message);
                  			// $.messager.alert('Messager',data.message,'info');
        	                bootbox.alert({ 
      	                 	  size: "small",
      	                 	  title: "Message",
      	                 	  message: "<b style='color:red'>"+data.message+"</b>"
      	                	});
                  		}	
                  	});
                }
                
  			});
  		});
  		
	   	$('#s_area_floor').change(function(){
	   		var communityId = $(this).children('option:selected').val();
	   		//console.log("communityId",communityId); 		
	   		changeFloorAreaSelections(communityId);
	   	});
	   	
		  function changeFloorAreaSelections(communityId){	
			  //console.log("communityId",communityId);
			  var params = {"communityId":communityId};
			  //console.log("params",params);
			  params = JSON.stringify(params);
		  	  // 初始化Area信息
		      $.ajax({	
		    		type : "POST",
		    		dataType : "JSON",
		    		url : "${pageContext.request.contextPath}/getBlockInfoByCommunityId.action",
		    		contentType:"application/json;charset=UTF-8",
		    		data : params,
		    		success : function(data){
					  //console.log(data);    			 
				      var blockHtml = "";
				      if(data!=null && data.length>0){
				        $(data).each(function(index,item){	
				          if(item){			        	  
					          var blockId = item["blockId"];
					          var blockName = item["blockName"];
					          if(blockId!=null && blockId!=undefined){			        	  
					          	 blockHtml += "<option value='"+blockId+"' selected='selected'>"+blockName+"</option>";
					          }
				          }
				        });
					    // console.log(blockHtml);
					    $("#s_block_floor").html(blockHtml);		  			      
				      }	
		    		}	
		    	});
		  }
		  
 	     /* 添加Floor部分 */
  		$(document).on("click", ".floor_add", function() {
	          var trcomp = "<tr><td><input name='floorName'></input></td><td><input name='floorNo' /> </td><td><input name='floorPage' /> </td><td><a href='javascript:;' class='delete_floor_row'><font color='red'>Delete</font></a></td></tr>";
  	          $("#floor_table tr:last-child").after(trcomp);  	          
  		});
 	     
  		$(document).on("click", ".delete_floor_row", function() {
			   var currentObj = $(this);
		       bootbox.confirm({ 
			        size: "small",
			        message: "<b>Do you really want to <b style='color:#d9534f'>delete</b> it?</b>", 
			        callback: function(result){
			           if(result){							
			              var tr = currentObj.get(0).parentNode.parentNode;
			              var tbody = tr.parentNode;
			              tbody.removeChild(tr);
			           }
			        }
		       });
		});
  		
  		$(function(){
  			$(".floor_save").click(function(){
  				var blockId = $("#s_block_floor option:selected").val().trim();
                if(blockId==undefined || blockId==''){
                    // $.messager.alert('Block Name value is invalid!');
	                bootbox.alert({ 
	                 	  size: "small",
	                 	  title: "Message",
	                 	  message: "<b style='color:red'>Block Name value is invalid!</b>"
	                });
                    return;
                }
                blockId = parseInt(blockId);
                // console.log("blockId",blockId);
                var tableObj = $("#floor_table");
                var columnTitle = tableObj.find("th");
                var flag = true;
                var trsData = tableObj.find("tr:gt(0)");
                var floorParams = [];
                trsData.each(function(row,trData){
                	//console.log(row,trData);
                	var inputsData = $(trData).find("td input");
                	// console.log(inputsData);
                	var floorObj = {};
                	var array = [];
                	inputsData.each(function(index,inputObj){
                		var errMessage = "row " + (row+1);
                        // 第一列是floorName字段
                        if((index+1)%3==1){
                          // console.log("index",index);
                          errMessage += " Floor Name is invalid!";
                        }else if((index+1)%3==2){
                          // 第二列是floorNo字段
                          // console.log("index",index);
                          errMessage += " Floor NO. is invalid!";
                        }else if((index+1)%3==0){
                          // 第三列是floorPage字段
                          errMessage += " Floor Page is invalid!";
                        }
                        if($(inputObj)[0]==undefined || $(inputObj).val()==''){
                            // 如果有数据为空,则提示并直接返回
                            // 注意这里返回没有用
                            // $.messager.alert('Messager',errMessage,'info');
	    	                bootbox.alert({ 
	  	                 	  size: "small",
	  	                 	  title: "Message",
	  	                 	  message: "<b style='color:red'>"+errMessage+"</b>"
	  	                	});
                            flag = false;
                        }
                        // console.log(index,inputObj);
                        // console.log(index,$(inputObj).val());
                        array.push($(inputObj).val());
                	});
                	// console.log(array);
                    var floorObj = {
                        "blockId":blockId,
                        "floorName":array[0],
                        "floorNO":parseInt(array[1]),
                        "floorPage":array[2]
                    };
                    // console.log(floorObj);
                    if(flag){
                       floorParams.push(floorObj);                  
                    }
                });
                // console.log(floorParams);
                // console.log(floorParams.length);
                // 如果flag为false就直接退出
                if(!flag || floorParams.length==0){
                    // 这是参数为空的
                    // console.log(floorParams);                  
                    // $.messager.alert('Messager','Parameter cannot be empty!','info');
	                bootbox.alert({ 
	                 	  size: "small",
	                 	  title: "Message",
	                 	  message: "<b style='color:red'>Parameter cannot be empty!</b>"
	                });
                    return;
                }else{
                    // 这个是数据完整的
                    // console.log(floorParams);
                    var floorParamsStr = JSON.stringify(floorParams);
                    // console.log(floorParamsStr);
                    $.ajax({	
	              		type : "POST",
	              		dataType : "JSON",
	              		url : "${pageContext.request.contextPath}/addFloorInfo.action",
	              		contentType:"application/json;charset=UTF-8",
	              		data : floorParamsStr,
	              		success : function(data){
	              			console.log(data.message);
	              			//$.messager.alert('Messager',data.message,'info');
	    	                bootbox.alert({ 
	  	                 	  size: "small",
	  	                 	  title: "Message",
	  	                 	  message: "<b style='color:red'>"+data.message+"</b>"
	  	                	});
	              		}	
	              });
                }
                
  			});
  		});
  		
	   	$('#s_area_light').change(function(){
	   		var communityId = $(this).children('option:selected').val();
	   		communityId = parseInt(communityId);
	   		// console.log("communityId",communityId); 		
	   		changeLightAreaSelections(communityId);
	   	});
	   	
	   	$('#s_block_light').change(function(){
	   		var blockId = $(this).children('option:selected').val();
	   		blockId = parseInt(blockId);
	   		//console.log("blockId",blockId); 	
	   		changeLightBlockSelections(blockId);
	   	});
	   	
	     /* 添加Light部分 */
		$(document).on("click", ".light_add", function() {
	          var trcomp = "<tr><td><input name='lightName'></input></td><td><input name='lightType' /> </td><td><input name='lightAddress' /><td><input name='lightSN' /></td></td><td><a href='javascript:;' class='delete_light_row'><font color='red'>Delete</font></a></td></tr>";
	          $("#light_table tr:last-child").after(trcomp);  	          
		});
	     
  		$(document).on("click", ".delete_light_row", function() {
			   var currentObj = $(this);
		       bootbox.confirm({ 
			        size: "small",
			        message: "<b>Do you really want to <b style='color:#d9534f'>delete</b> it?</b>", 
			        callback: function(result){
			           if(result){							
			              var tr = currentObj.get(0).parentNode.parentNode;
			              var tbody = tr.parentNode;
			              tbody.removeChild(tr);
			           }
			        }
		       });
		});
  		
  	    function dotStrToInt(str){
	      	return parseInt(str.replace(/\./g,'00'));
	    }
  		
  		$(function(){
  			$(".light_save").click(function(){
  				var floorId = $("#s_floor_light option:selected").val();
                if(floorId==undefined || floorId==''){
                    // $.messager.alert('Floor Name value is invalid!');
	                bootbox.alert({ 
	                 	  size: "small",
	                 	  title: "Message",
	                 	  message: "<b style='color:red'>Floor Name value is invalid!</b>"
	                });
                    return;
                }
                floorId = parseInt(floorId);
                // console.log("floorId",floorId);
                var tableObj = $("#light_table");
                var columnTitle = tableObj.find("th");                
                var flag = true;
                
                var trsData = tableObj.find("tr:gt(0)");
                var lightParams = [];
                trsData.each(function(row,trData){
                	// console.log(row,trData);
                	var inputsData = $(trData).find("td input");
                	var array = [];
                	inputsData.each(function(index,inputObj){
                		var errMessage = "row " + (row+1);
                        // 第一列是lightName字段
                        if((index+1)%4==1){
                          // console.log("index",index);
                          errMessage += " Light Name is invalid!";
                        }else if((index+1)%4==2){
                          // 第二列是lightType字段
                          // console.log("index",index);
                          errMessage += " Light Type is invalid!";
                        }else if((index+1)%4==3){
                          // 第三列是lightAddress字段
                          errMessage += " Light Address is invalid!";
                        }else if((index+1)%4==0){
                          // 第四列是lightSN字段
                          errMessage += " Light SN is invalid!";
                        }
                        if($(inputObj)[0]==undefined || $(inputObj).val()==''){
                            // 如果有数据为空,则提示并直接返回
                            // 注意这里返回没有用
                            //alert(errMessage);
                            // $.messager.alert('Messager',errMessage,'info');
        	                bootbox.alert({ 
      	                 	  size: "small",
      	                 	  title: "Message",
      	                 	  message: "<b style='color:red'>"+errMessage+"</b>"
      	                	});
                            flag = false;
                        }
                        // console.log(index,inputObj);
                        // console.log(index,$(inputObj).val());
                        array.push($(inputObj).val());
                	});
                	// console.log(array);
                    var lightObj = {
                            "floorId":floorId,
                            "lightName":array[0],
                            "lightType":parseInt(array[1]),
                            "lightAddress":dotStrToInt(array[2]),
                            "lightSN":array[3]
                    };
                    // console.log(lightObj);
                    if(flag){
                        lightParams.push(lightObj);            
                    }                	
                });
                // console.log(lightParams);
                // console.log(lightParams.length);
                // 如果flag为false就直接退出
                if(!flag || lightParams.length==0){
                    // 这是参数为空的
                    // console.log(lightParams);       
                    // $.messager.alert('Messager','Parameter cannot be empty!','info');
	                bootbox.alert({ 
	                 	  size: "small",
	                 	  title: "Message",
	                 	  message: "<b style='color:red'>Parameter cannot be empty!</b>"
	                });
                    return;
                }else{
                    // 这个是数据完整的
                    // console.log(lightParams);
                    paramsStr = JSON.stringify(lightParams);
                    // console.log(paramsStr);
                    $.ajax({	
	              		type : "POST",
	              		dataType : "JSON",
	              		url : "${pageContext.request.contextPath}/addLightInfo.action",
	              		contentType:"application/json;charset=UTF-8",
	              		data : paramsStr,
	              		success : function(data){
	              			//console.log(data.message);
	              			// $.messager.alert('Messager',data.message,'info');
	    	                bootbox.alert({ 
	  	                 	  size: "small",
	  	                 	  title: "Message",
	  	                 	  message: "<b style='color:red'>"+data.message+"</b>"
	  	                	});
	              		}	
	               });                    
                }
                
  			});
  		});
  	        
  	 });
  </script>
</head>
<body>

  <div class="main">

	<c:import url="navbar.jsp"></c:import>

    <div class="container-fluid">
	  <!-- tab area/block/floor/light部分 -->
	  <div class="tab_dv">
	      <button type="button" class="btn btn-success" >Add Area</button>
	      <button type="button" class="btn btn-info" >Add Block</button>
	      <button type="button" class="btn btn-info" >Add Floor</button>
	      <button type="button" class="btn btn-info" >Add light</button>
	      <!-- <input class="area_save" type="button" value="Save" id="saveBtn"> -->
	  </div>
	  <div class="all_info">
	    <!-- 添加Area部分 -->
	    <div class="area  selected">
	        <span class="area_span">
	            <table class="table table-striped table-bordered table-hover" id="area_table" cellpadding="0" cellspacing="0">
	              <tr>
	                <th class="text-center">Area Name</th>
	                <th class="text-center">Area Address</th>
	                <th class="text-center">Operation</th>
	              </tr>
	                <tr>
	                <td><input name="areaName" /></td>
	                <td><input name="areaAddress" /> </td>
	                <td><a href="javascript:;" class="delete_area_row"><font color='red'>Delete</font></a></td>
	                </tr>
	            </table>
	        </span>
	        <button class="area_add" >+</button>
	        <!-- <input class="area_save" type="button" value="Save" id="saveBtn"> --> 
	        <input class="area_save" type="button" value="Save" id="saveBtn">	                
	    </div>
	     <!-- 添加Block部分 -->
	    <div class="block">
	        <span class="block_span">
	            <table class="table table-striped table-bordered table-hover" id="block_table" cellpadding="0" cellspacing="0">
	              <tr>
	                <th class="text-center">Block Name</th>
	                <!-- <th>Block Address</th> -->
	                <th class="text-center">Operation</th>
	              </tr>
	                <tr>
	                <td><input name="blockName" /></td>
	                <!-- <td><input name="blockAddress" /> </td> -->
	                <td><a href="javascript:;" class="delete_block_row"><font color='red'>Delete</font></a></td>
	                </tr>
	            </table>
	        </span>
	        <button class="block_add" >+</button>
	        <input class="block_save" type="button" value="Save" > 
	        <span class="area_block">
	          <select name="" id="s_area_block">
	            <!-- <option value="1" selected="selected">Area1</option>
	            <option value="2">Area2</option> -->
	          </select>
	        </span>
	    </div>
	    <!-- 添加Floor部分 -->
	    <div class="floor">
	        <span class="floor_span">
	            <table class="table table-striped table-bordered table-hover" id="floor_table" cellpadding="4px" cellspacing="0">
	              <tr>
	                <th class="text-center">Floor Name</th>
	                <th class="text-center">Floor NO.</th>
	                <th class="text-center">Floor Page</th>
	                <th class="text-center">Operation</th>
	              </tr>
	                <tr>
	                <td><input name="floorName" /></td>
	                <td><input name="floorNo" /> </td>
	                <td><input name="floorPage" /> </td>
	                <td><a href="javascript:;" class="delete_floor_row"><font color='red'>Delete</font></a></td>
	                </tr>
	            </table>
	        </span>
	        <button class="floor_add">+</button>
	        <input class="floor_save" type="button" value="Save" > 
	        <span class="area_floor">
	          <select name="" id="s_area_floor">
	            
	          </select>
	        </span>
	        <span class="block_floor">
	          <select name="" id="s_block_floor">
	            
	          </select>          
	        </span>
	    </div>
	    <!-- 添加light部分 -->
	    <div class="light">
	        <span class="light_span">
	            <table class="table table-striped table-bordered table-hover" id="light_table" cellpadding="4px" cellspacing="0">
	              <tr>
	                <th class="text-center">Light Name</th>
	                <th class="text-center">LightType</th>
	                <th class="text-center">LightAddress</th>
	                <th class="text-center">LightSN</th>
	                <th class="text-center">Operation</th>
	              </tr>
	                <tr>
	                <td><input name="lightName" /> </td>
	                <td><input name="lightType" /></td>
	                <td><input name="lightAddress" /> </td>
	                <td><input name="lightSN" /> </td>
	                <td><a href="javascript:;" class="delete_light_row"><font color='red'>Delete</font></a></td>
	                </tr>
	            </table>
	        </span>
	        <button class="light_add" >+</button>
	        <input class="light_save" type="button" value="Save" > 
	        <span class="area_light">
	          <select name="" id="s_area_light">
	            <!-- <option value="1" selected="selected">Area1</option>
	            <option value="2">Area2</option> -->
	          </select>
	        </span>
	        <span class="block_light">
	          <select name="" id="s_block_light">
	            <!-- <option value="1" selected="selected">Block1</option>
	            <option value="2">Block2</option> -->
	          </select>
	        </span>
	        <span class="floor_light">
	          <select name="" id="s_floor_light">
	            <!-- <option value="1" selected="selected">floor1</option>
	            <option value="2">floor2</option> -->
	          </select>
	        </span>
	    </div>
	  </div>
    </div>
  </div>

  <c:set var="current_page" scope="session" value="add_area"/>
  <c:import url="sidebar.jsp"></c:import>

</body>
</html>

 

Leon_Jinhai_Sun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
area地区js文件大全
08-19
dsy.add("0_2_0",["黄浦区","卢湾区","徐汇区","长宁区","静安区","普陀区","闸北区","虹口区","杨浦区","闵行区","宝山区","嘉定区","浦东新区","金山区","松江区","青浦区","南汇区","奉贤区","崇明县","城桥镇...
浮动效果滚动条的ScrollArea
01-10
在本文中，我们将深入探讨如何实现一个具有浮动效果的滚动条的`ScrollArea`，这在QT编程中是一个常见的需求。`QScrollArea`是QT库中的一个关键组件，它提供了一个可滚动的区域，可以包含任何QWidget子类的对象。在...
ovp_trigger_times
Leon_Jinhai_Sun的博客
04-03 189
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page trimDirectiveWhitespaces="true"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/js...
微信小程序picker组件遇到的问题与解决方案
书写人生
01-17 1万+
一、picker基本概念 当然先看官方文档 picker说明搞清楚基本概念 “从底部弹起的滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器。” 几个主要属性： range： 选取范围，数据类型为Array / Object Array，mode为 普通选择器 时，range 有效； value： value 的值表示选择了
commit-area
03-17
2. **暂存区（Stage/Index）**：暂存区是Git中的一个重要概念，它是将工作区的更改准备提交到历史记录的一个中间地带。你可以通过`git add`命令将工作区的更改添加到暂存区。 3. **提交（Commit）**：当你对代码...
QScrollArea_Test.zip
02-22
2. **setWidget()**：此方法用来设置QScrollArea要显示的Widget。这个Widget可以是任何继承自QWidget的对象。 3. **widgetResizable()**：这个属性控制着内部Widget的大小是否随QScrollArea的大小改变而自动调整。...
db2迁移到mysql.docx
05-17
SELECT *, ROWNUMBER() OVER (ORDER BY AREA_CODE) AS ROWNUMBER_ FROM mytable WHERE 1 = 1 AND ROWNUMBER_ BETWEEN startRow AND endRow ``` ##### MySQL分页写法 ```sql SELECT * FROM mytable WHERE 1 = 1 ORDER...
energy_consumption
Leon_Jinhai_Sun的博客
04-02 274
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page trimDirectiveWhitespaces="true"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/js...
select选择框去掉默认的下拉箭头
aiting4826的博客
06-27 1252
select下拉框有一个下拉箭头样式，可以使用appearance与-ms-expand去掉这个样式。 代码如下： .not-arrow{ padding: 5px 10px; border:1px solid #dcd8d8; -webkit-appearance:none; -moz-appearance:none; appearance:none; /*去掉下拉箭头*...
自己修改select的样式（修改select右边的小三角）
热门推荐
java_zhaoyanli的专栏
09-15 6万+
CSS就可以解决，原理是将浏览器默认的下拉框样式清除，然后应用上自己的，再附一张向右对齐小箭头的图片即可。 select { /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ border: solid 1px #000; /*很关键：将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none;
关于select样式重置和移动端网页添加meta标签的问题
summer_my_sunshine的博客
02-17 1792
select标签在各个浏览器的默认样式都是不一样的，要想重置样式，则给select加： appearance:none;-moz-appearance:none;-webkit-appearance:none;background: #fff;border: 1px solid #ccc;padding-right: 18px;background: url(images/select_arro
Servlet/listener/filter应用大全
小蜜蜂
01-11 734
服务器servlet/listener/filter 11 http/tomcat  - http协议版本 使用最广泛的是1.1的版本。  它是一种请求 - 响应  模型的协议。  1.0请求 - 响应完毕后，连接关闭  ， 如果还想接着请求，必须得重新连接  1.1 请求 - 响应完毕后，连接未关闭 ，还可以继续发起请求 Get请求和post请求的区别   如果action 都写成 a...
select框默认样式去除（隐藏的小图标显示）
zuo_zuo_blog的博客
11-20 6656
CSS代码 /*清除ie的默认选择框样式清除，隐藏下拉箭头*/           select::-ms-expand { display: none; }                    .info-select{             width: 12%;             margin-left: 64%;             border: none;       ...
tortoisegit add
最新发布
06-14
2. **暂存区（Staging Area）**：`git add`会将选定的文件或文件夹添加到暂存区，这个区域被称为索引，也称为 staging area。在这个阶段，Git记录了这些文件状态的变化，但尚未将它们与远程仓库关联。 3. **提交...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值