21.04.09

[실시간 데이터 변경]

[index.jsp]
<script>
	listCall();
	
	function listCall() {
		$.ajax({
			url : './list',
			type : 'GET',
			data : {},
			dataType : 'JSON',
			success : function(data) {
				console.log(data);
				listPrint(data.list);
			},
			error : function(error) {
				console.log(error);
			}
		});
	}
	
	function listPrint(list) {
		var content = "";
		list.forEach(function(item){
			content += "<tr>";
			content += "<td>"+item.num+"</td>";
			content += "<td><input class='row"+item.num+" leader' type='text' value='"+item.leader+"'/></td>";
			content += "<td><input class='row"+item.num+" member1' type='text' value='"+item.member1+"'/></td>";
			content += "<td><input class='row"+item.num+" member2' type='text' value='"+item.member2+"'/></td>";
			content += "<td><input class='row"+item.num+" member3' type='text' value='"+item.member3+"'/></td>";
			content += "<td><input class='row"+item.num+" member4' type='text' value='"+item.member4+"'/></td>";
			content += "<td><input class='row"+item.num+" member5' type='text' value='"+item.member5+"'/></td>";
			content += "<td><input class='row"+item.num+" project' type='text' value='"+item.project+"'/></td>";
			content += "</tr>"			
		}); 
		$('#list').empty();
		$('#list').append(content);
		
		$("input[type='text']").focusin(function(e){
			$(this).css("background-color","white");
		});
		
		$("input[type='text']").focusout(function(e){
			//console.log($(this));
			$(this).css("background-color","lightgray");
			var defaultVal = $(this).prop("defaultValue");
			if($(this).val()!=defaultVal){
				console.log("수정요청");	
				reqUpdate($(this)[0]);
			}
		});
	}
	
	function reqUpdate(elem){
		//UPDATE teams_mj SET member1='민주' WHERE num=1
		//필요한 정보 ? num,변경된 컬럼, 변경된 내용
		console.log(elem.classList);
		var col = elem.classList[1];
		var val = elem.value;
		var num = elem.classList[0].substring(3);
		console.log(col,val,num);
		
		//일반 파라메터 vs restful요청(본래 데이터 읽기 요청으로 사용하는 것이 가장 적합)
		//list/{col}/{value}/{num}
		$.ajax({
			url:'./update/'+col+'/'+val+'/'+num,
			type:'get',
			data:{},
			dataType:'json',
			success:function(d){
				if(d.success==1){
					elem.defaultValue=elem.value; //defaultValue수정
				}else{
					alert("수정에 실패했습니다.");
					elem.value = elem.defaultValue;//이전값으로 복원
					
				}
			},
			error:function(e){
				console.log(e);
			}
		}); 
	}
</script>

@RestController
public class MainController {
	
	private  Logger logger = LoggerFactory.getLogger(this.getClass());
	@Autowired TeamService service;

	@RequestMapping(value = "/", method = RequestMethod.GET)
	public ModelAndView home() {
		logger.info("최초페이지");
		ModelAndView mav = new ModelAndView();
		mav.setViewName("index");
		return mav;
	}
	
	@RequestMapping(value = "/list", method = RequestMethod.GET)
	public HashMap<String, Object> list() {
		logger.info("리스트 요청");
		return service.list();
	}
	
	@RequestMapping(value = "/update/{col}/{val}/{num}", method = RequestMethod.GET)
	public HashMap<String, Object> update(@PathVariable String col, @PathVariable String val, @PathVariable String num) {		
		logger.info("수정 요청");
		logger.info(col+"/"+val+"/"+num);
		return service.update(col,val,num);
	}
}

@Service
public class TeamService {
	
	private  Logger logger = LoggerFactory.getLogger(this.getClass());
	@Autowired TeamDAO dao;
	
	public HashMap<String, Object> list() {
		logger.info("리스트 요청");
		HashMap<String, Object> map = new HashMap<String, Object>();
		ArrayList<TeamDTO> list = dao.list();
		map.put("list", list);
		return map;
	}

	public HashMap<String, Object> update(String col, String val, String num) {
		HashMap<String, Object> map = new HashMap<String, Object>();
		int success = dao.update(col,val,num);
		logger.info("수정 성공 여부 : "+success);
		map.put("success", success);
		return map;
	}

}

<mapper namespace="com.spring.main.dao.TeamDAO">
	
	<select id="list" resultType="com.spring.main.dto.TeamDTO">
		SELECT * FROM teams_mj
	</select>
 	
 	<!-- 파라메터로 받아온 값을 컬럼명으로 사용하고 싶을 때는 $를 사용한다.
 	하지만 보안상의 이유로 사용을 권하지 않는다.
 	 -->
 	<update id="update">
 		UPDATE teams_mj SET ${param1}=#{param2} WHERE num = #{param3}
 	</update>
	
</mapper>