버튼 클릭 시 이벤트(상세보기)

사전 준비

• 원하는 화면을 공통으로 따로 분리
• ex) form태그 전체를 잘라내서 다른 파일로 만듬 (<div th:insert="thymeleaf/어쩌구_include.html"></div>)

상세보기 버튼 클릭시 이벤트 발생!!

<button th:id="${aList.id}" th:onclick="selectDetail(this.getAttribute('id'), $(this).parent())">

상세보기

</button>

• aList의 id를  th:id로 커스터마이징하여 id변수에 담기
• th:onclick으로 버튼 클릭시 selectDetail이라는 함수 실행
• 이 함수에 id변수의 값과 <button>의 부모 태그를 파라미터로 보냄

 

 

예를 들어

@PostMapping("select_list")
    public String select_list(HttpServletRequest request, 

                                                            Model model,
                                                           @RequestParam(name = "id", required = false) String Id,
                                                           @RequestParam(name = "target", required = false) String target
                                                          ) throws Exception{

 

        List<만든Vo> testList = 만든Service.만든메소드(id);

// 화면에 객체바인딩 할 때

        model.addAttribute("testList",testList);

        if(target == null || target.isEmpty() ||  target.equals("")){

            return " thymeleaf/어쩌구_include.html " ;

        }

}

 

이래서 ajax 성공후 result에 select_list에서 따로 빼둔  _include.html 화면이 그려져서 result에 담긴다.

parent.parent().after("<tr class='selectDetailList'><td colSpan=5>" + result + "</td></tr>");

상세보기 버튼의 바로 밑에 _include.html 화면을 넣겠다라는 뜻

 

아........모르겠다~~~~~~~~~~~~~~~~~~~~~~~~~~~