HTML & CSS & JS
DB검색으로 List 채우기
이무쿤
2020. 1. 14. 15:38
반응형
Repository Query
@Query("SELECT p FROM Prod p WHERE p.prodNm LIKE CONCAT('%',:searchProduct,'%')")
List<Prod> findProdWithPartOfName(@Param("searchProduct") String searchProduct);
HTML 검색창
thymeleaf를 통해 Controller 접근해서 다시 화면으로 뿌려주게 함.
ajax 쓰면 data return하고 jquery환경에서 html로 보내는 법 잘 모르겠음.
java에서 thymeleaf 매개변수로 보내주는 것이 좀더 편했음.
<div class ="mb-3 mt-3">
<form th:action ="@{/searchProd}" method ="post">
<label for="searchProduct">Search Product:</label>
<input class ="form-control" type ="text" id ="searchProduct" name ="searchProduct">
<div class ="row">
<div class ="col-11">
</div>
<div class ="mt-1 col-1">
<button class= "btn btn-success" type ="submit" id ="search">Search</button>
</div>
</div>
</form>
</div>
Controller
Repository에서 생성한 쿼리로 찾아서 List에 저장한 뒤에 그 List를 매개변수로 다시 HTML에 뿌림
@RequestMapping(value = "/searchProd" , method = RequestMethod.POST)
public ModelAndView searchPRod(@ModelAttribute SearchProduct searchProduct) {
System.out.println("+++++++++++++++++++++++");
System.out.println(searchProduct.getSearchProduct());
System.out.println("+++++++++++++++++++++++");
List<Prod> list = prodRepo.findProdWithPartOfName(searchProduct.getSearchProduct());
System.out.println("+++++++++++++++++++++++");
System.out.println(list);
System.out.println("+++++++++++++++++++++++");
ModelAndView mv = new ModelAndView();
prodList = list;
mv.setViewName("redirect:/estmRegisterTemp");
return mv;
}
@RequestMapping(value = "/estmRegisterTemp", method = RequestMethod.GET)
public ModelAndView estmRegisterTemp() {
ModelAndView mv = new ModelAndView();
//List<ProdCategory> prodCategoryList = new ArrayList<>();
//prodCategoryList = prodCategoryRepo.findAllByParentCategory(0);
mv.setViewName("estm-register");
mv.addObject("estmReqDtlList",estmReqDtlList );
mv.addObject("estmReqNameInput",estmReqName );
mv.addObject("salesOptntList", salesOptntList);
mv.addObject("prodList",prodList);
mv.addObject("selectSalesOptntId",salesOptntId);
mv.addObject("selectSalesOptnt",salesOptnt);
mv.addObject("prodCategoryListFirst", prodCategoryListFirst);
//mv.addObject("prodCategoryList", prodCategoryList);
return mv;
}
다시 HTML
-table에서 each로 받아서 쭉 나오게 출력 함.
<div class ="mb-3 mt-3">
<table id = "product-list">
<thead>
<tr>
<td>product list</td>
</tr>
</thead>
<tbody>
<tr th:each="prod:${prodList}">
<td>
<input class ="form-control" th:value ="${prod.prodNm}" readonly="readonly">
<input type ="hidden" th:value = "${prod.prodId}" name =prodId readonly="readonly">
</td>
<td>
<form th:action ="@{/createEstmReqDtl}" method="post">
<div class ="row">
<div class ="col-6">
<input class="form-control" name="estmReqCnt" type="number" value="0" size = 10>
<input type ="hidden" th:value = "${prod.prodId}" name =prodId readonly="readonly">
</div>
<div class ="col-6">
<button class="btn btn-success" name="" type="submit" id ="addButton">add</button>
</div>
</div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
반응형