본문 바로가기
프론트엔드/JavaScript

js 테이블 체크박스 데이터 한번에 전송하는 방법 - ajax로 배열 controller로 전송하여 VO에 담기

by step 1 2022. 3. 23.
반응형

HTML의 각 태그 데이터를 선택자를 이용하여 변수에 담은 후 배열에 저장한다.

그 후 ajax를 통해 배열 데이터를 전송

function order(flag) {
		var isAdmin = <c:out value="${isMasterAdmin }" />;
		var url = "/dit/apps/array123.nr";
		var num_check=/^[0-9]*$/;
		var data = new Object();
		var rowData = new Array(); 
	    var tdArr = new Array();
	    var checkbox = $("input[name=select]:checked");
	    
	    // 인수확인버튼 클릭할때에만 메일번호 생성
	   /* if(flag == "a2"){
	    	var mailNum = get_MailNum();
	    }*/
	    
	    //alert('메일번호: ' + mailNum)
//	    alert('checkbox: ' + checkbox);
	 // 체크된 체크박스 값을 가져온다
	    checkbox.each(function(i) {
	    	//alert('aaa: ' + i);
		    // checkbox.parent() : checkbox의 부모는 <td>이다.
		    // checkbox.parent().parent() : <td>의 부모이므로 <tr>이다.
		    var tr = checkbox.parent().parent().eq(i);
		    var td = tr.children();
		                
		    // 체크된 row의 모든 값을 배열에 담는다.
		    rowData.push(tr.text());
		                
		    // td.eq(0)은 체크박스 이므로  td.eq(1)의 값부터 가져온다.
		    var req_id = td.eq(1).text();
		    var vendor_id = td.eq(2).text();
		    var company_reg_no = td.eq(3).text();		    
		    var req_num = td.eq(4).text();
		    var company_name = td.eq(5).text();
		    var item_id = td.eq(6).text();
		    var item_desc = td.eq(7).text();
		    var req_quantity = td.eq(8).text();
		    var ship_method = td.eq(9).find('input[type="text"]').val();
		    var ship_quantity = td.eq(10).find('input[type="number"]').val();
		    var take_quantity = td.eq(11).find('input[type="number"]').val();
		    var req_date = td.eq(12).text();
		    var take_check = td.eq(13).text();
		    var status_ori = td.eq(14).text();
		    var status = td.eq(14).text();
		    
		    if (status == '작성중'){
		    	status = "01";	
		    } else if (status == '주문'){
		    	status = "02";	
		    } else if (status == '발송'){
		    	status = "03";	
		    } else if (status == '인수확인'){
		    	status = "04";	
		    } else if (status == '취소'){
		    	status = "05";	
		    } else if (status == '최종확인'){
		    	status = "06";	
		    }
		    
		    if (flag == "a0"){
		    	status = "02";	
		    } else if(flag == "a1"){
		    	status = "03";	
		    } else if (flag == "a2") {
		    	take_check = "Y";	
		    	status = "04";	
		    } else if (flag == "a3") {
		    	take_check = "C";	
		    	status = "05";	
		    } else if (flag == "a4") {
		    	take_check = "Y";	
		    	status = "06";	
		    }
		    
		    
		                
		    // 가져온 값을 배열에 담는다.
		    var allData = {"req_num": req_num, "company_name" : company_name, "item_id" : item_id
		    		      ,"item_desc" : item_desc, "req_quantity" : req_quantity, "ship_method" : ship_method
		    		      ,"ship_quantity" : ship_quantity, "take_quantity" : take_quantity, "req_date" : req_date
		    		      ,"take_check" : take_check, "status" : status, "req_id": req_id, "vendor_id": vendor_id, "company_reg_no": company_reg_no
		    		      ,"attribute2": '11'};
		    

		    if(td.eq(1).text() != '요청번호'){
			    // 관리자일 경우 어떤상태에서든지 이벤트 가능
			    if(isAdmin){
			    	
					$.ajax({
						 type: 'post'
					    ,data: allData
					    ,url: url
					    ,dataType: "json"
						,async: false
						,success: function(data, status){
						   num = data;
						}
					});
			    // 관리자가 아니면 발송버튼은 주문상태에서만, 확인버튼은 발송상태에서만 가능
			    } else {
			    	// 주문버튼 -> 주문
			    	if(flag == "a0"){
					    if(status_ori == "작성중"){
					    		
						    $.ajax({
								type: 'post'
							   ,data: allData
							   ,url: url
							   ,dataType: "json"
							   ,async: false
							   ,success: function(data, status){
								   num = data;
							   }
							});
					    } else {
					    	alert("요청번호: " + req_num + "은 진행상태가 작성중상태가 아닙니다.");
					    }
					 // 발송버튼 -> 발송    
					}else if(flag == "a1"){
					    if(status_ori == "주문"){
					    		
						    $.ajax({
								type: 'post'
							   ,data: allData
							   ,url: url
							   ,dataType: "json"
							   ,async: false
							   ,success: function(data, status){
								   num = data;
							   }
							});
					    } else {
					    	alert("요청번호: " + req_num + "은 진행상태가 주문상태가 아닙니다.");
					    }
					 // 인수버튼 -> 인수확인    
					}else if(flag == "a2"){
					   	if(status_ori == "발송"){
					    		
							 $.ajax({
								type: 'post'
							   ,data: allData
							   ,url: url
							   ,dataType: "json"
							   ,async: false
							   ,success: function(data, status){
								   num = data;
							   }
							});
					    }else{
					    	alert("요청번호: " + req_num + "은 진행상태가 발송상태가 아닙니다.");
					    }
					 // 취소버튼 -> 취소
					}else if(flag == "a3"){
					   	
				    	// 취소상태는 언제든 취소가능	
						$.ajax({
							type: 'post'
						   ,data: allData
						   ,url: url
						   ,dataType: "json"
						   ,async: false
						   ,success: function(data, status){
						       num = data;
						   }
					    });
					// 발송버튼 -> 최종확인  
			       }else if(flag == "a4"){
					   	if(status_ori == "인수확인"){
				    		
							 $.ajax({
								type: 'post'
							   ,data: allData
							   ,url: url
							   ,dataType: "json"
							   ,async: false
							   ,success: function(data, status){
								   num = data;
							   }
							});
					    }else{
					    	alert("요청번호: " + req_num + "은 진행상태가 인수확인상태가 아닙니다.");
					    }
			       }

		    }
	    
		    }
		    
	    });
	 /*
	   if(flag == "a2") {
		   url = "/dit/apps/ReqMat/mail.nr";
		   var TakeMailData = {"key": mailNum, "flag": flag};
		   $.ajax({
				 type: 'post'
			    ,data: TakeMailData
			    ,url: url
			    ,dataType: "json"
				,async: false
				,success: function(data, status){
				   num = data;
				}
			});   
	   } 
	 */
	   movePage(); /* 재조회 */
	 
	}

 

controller에서 VO객체를 이용하여 배열로 전송된 데이터를 받는다.

@SuppressWarnings({ "rawtypes", "unchecked" })
		@RequestMapping(value = "/dit/apps/array123.nr")
		@ResponseBody
		public void ProductMail(HttpServletRequest request, Model model, ReqMaterialVO vo) throws Exception {
			logger.debug("## 체크리스트");
			LoginoutUserEntity userInfo = SessionManager.getLoginoutUser(request);
			logger.debug(userInfo.getUserLoginID());
			//QueryCondition qc = new QueryCondition(param);
			//logger.debug((String) param.get("allData"));
			//logger.debug("no: " + no);
			logger.debug(vo.getReq_id());
			logger.debug(vo.getReq_num());
			logger.debug(vo.getItem_desc());
			logger.debug(vo.getShip_method());
			logger.debug(vo.getShip_quantity());
			logger.debug(vo.getAttribute2()); // 메일 묶음 키 값
			logger.debug(vo.toString());
			vo.setCreated_by(userInfo.getUserLoginID());
			vo.setLast_updated_by(userInfo.getUserLoginID());
			logger.debug("최종: " + vo.toString());
			//vo.setStatus("03"); // 발송상태로 변경
			int result = 0;
			result = materialService.reqMaterialUpdate(vo);
			
			// 메일 전송을 위해 데이터 저장
			materialService.reqMaterialMail(vo);
			
			//logger.debug("arrayParams: " + arrayParams);
			//Object a = param.get("data");
			//System.out.println("aaa: " + a.toString());
			//List<Map<String, Object>> list = new ArrayList();
			//list.addAll("data",(String)param.get("data"));
			//logger.debug(list.get(0).toString());
			
		}

 

참고 사이트

https://itkjspo56.tistory.com/181

 

[Java] Array 배열 Controller VO로 받기 파싱

자바를 이용하면서 MVC패턴을 통해 Controller에서 데이터를 주고받는일이 있다. 기존 JSP에서는 제목 ${testVO.title} 내용 ${testVO.content} 이름 ${testVO.name} 번호 ${testVO.bno} 이러한 형태로 데이터를..

itkjspo56.tistory.com

 

VO방식 말고도 map으로 받는 방법도 있는것으로 보인다.

https://yulfsong.tistory.com/76

 

Ajax data를 Controller에서 받는 두 가지 방법 : Vo / Map

Ajax의 data를 Controller에서 받아야할 때가 자주 있는데 Vo를 만들어서 받는 방법이 있고 Map을 이용하는 방법이 있다. 1. Vo로 받는 방법 var memberId = $("#memberId").val(); var memberPass = $("#memberPa..

yulfsong.tistory.com

 

반응형