본문 바로가기
✨ Back-end/Spring-Boot

[Spring] 쇼핑몰 - 57 주문 관리 검색 기능 만들기

by 환풍 2023. 4. 27.
728x90
반응형

 

 


order_manage.html

html에서 일단 그림을 그려주었다.

align-middle  -> 버튼 생성 시 글자들이 위로 올라가는데, 다시 가운데 정렬해준다.

admin_mapper.xml

각 input에 맞는 데이터들을 집어넣어 조건에 맞는 데이터들만 조회하기 위해 쿼리를 수정해주었다.

 

검색 기능을 구현하기위해 데이터를 이렇게 조회해보았는데, BUY_CODE와 BUY_DATE, STATUS_CODE에 임의의 값을 넣어 조회되는지 확인해보고, 오른쪽과 같이 java에 있는 데이터로 바꿔넣었다.

OrderListSearchVO

컬럼이 변수로 들어오면 # 말고 $쓴다. 왜냐하면 #은 데이터 준 뒤  '  ' 를 줌으로써 문자로 인식한다.

AdminController 컨트롤러

DB쿼리를 mapper에 이렇게 바꿔서시켜주었다.

Service

 

order_manage.html

데이터들을 name속성으로 담아 form으로 컨트롤러에 보낼거다. 단, 컨트롤러에 가기전 먼저 js를 거친다.

 

html에서 데이터들을 form태그에 감쌌고, 주문상태가 아무것도 체크 안돼있으면 의미가 없으므로 ,

체크가 됬는지 확인하기 위해 onclick으로 js로 보내준다.

order_manage.js

input[type="checkbox"]:checked input중에서 type이 check인것만 찾고, 체크된 것만 찾는다. 그리고 그 갯수를 들고온다.

AdminController 컨트롤러

주문관리 페이지 조회는 get과 post모두 적용되야하므로 @RequestMapping("/orderManage") 으로 바꿔준다


체크박스들이 초기화 될 때마다 저장된 값을 불러오기 위해 설정한다.

order_manage.html

this = 내가 클릭한 태그 그 자체

order_manage.js

order_manage.html

 

order_manage.html

입력한 데이터를 그대로 다시 들고오기 위해  value값을 각각 추가해서 넣어주었다.

th:value="${orderListSearchVO.searchFromDate}"

th:value="${orderListSearchVO.searchToDate}"

 th:value="${orderListSearchVO.searchValue}"

order_manage.html

th:selected="${orderListSearchVO.searchKeyword == '  '}" 에도 각각 데이터들을 넣어주면서, 새로고침이나, search를 눌렀을때 해당 값을 저장하여 초기화되지 않는다.

 

이렇게 주문상태에 있는 체크박스들과, 주문일시에 있는 From 데이터들을 설정 한 후 Search를 통해 데이터가 조회되면서

설정한 값들도 다시 초기화안되고 유지되고 있는 화면을 볼 수 있다. 

728x90
반응형

댓글