개발 공부중인 비모
고정 헤더 영역
상세 컨텐츠
본문
반응형
학원 프로젝트에서 내가 맡은 부분에 썸네일 기능이 들어가는데..
썸네일,검색기능은 안배워서 구글링을 많이했다..
..
<js>
//cartype: 전체 선택 체크박스가 변경되었을때
$('#alltype').on('ifChanged',function(){
//전체가 체크되면 다른 체크박스 해제
if($('#alltype:checkbox').is(":checked")==true) {
setTimeout(function(){
$('[name=cartypeIdx]').iCheck('uncheck');
},0);
// 모두 선택되지 않았을경우 자동으로 전체가 체크되게 한다
} else if ($('input:checkbox[name=cartypeIdx]:checked').length == 0 ) {
setTimeout(function(){
$('#alltype').iCheck('check');
},0);
}
})
//cartype: 전체 제외 다른 체크박스가 변경되었을때
$('[name=cartypeIdx]').on('ifChanged', function() {
//배열을 생성하고 체크된 value값을 배열에 담는다
let arr = [];
$('input:checkbox[name=cartypeIdx]:Checked').each(function() {
arr.push($(this).val());
})
// 모두 선택되지 않았을경우 자동으로 전체가 체크되게 한다
if($('input:checkbox[name=cartypeIdx]:checked').length == 0 && ($("#alltype:checkbox" ).is( ":checked") == false )) {
setTimeout(function(){
$('#alltype').iCheck('check')
},0);
//하나라도 체크를 하면 전체체크박스가 해제된다
}else {
setTimeout(function(){
$('#alltype').iCheck('uncheck');
},0);
}
})
$('#inputword').on('input', paging);
//fueltype: 전체 선택 체크박스가 변경되었을때
$('#allfuel').on('ifChanged',function(){
//전체가 체크되면 다른 체크박스 해제
if($('#allfuel').is(":checked")==true) {
setTimeout(function(){
$('[name=fueltypeIdx]').iCheck('uncheck');
},0);
// 모두 선택되지 않았을경우 자동으로 전체가 체크되게 한다
} else if ($('#allfuel:checkbox').is(":checked")==false &&($('input:checkbox[name=fueltypeIdx]:checked').length == 0 ) ) {
setTimeout(function(){
$('#allfuel').iCheck('check');
},0);
}
})
//fueltype: 전체 제외 다른 체크박스가 변경되었을때
$('[name=fueltypeIdx]').on('ifChanged', function() {
//배열을 생성하고 체크된 value값을 배열에 담는다
let arr = [];
$('input:checkbox[name=fueltypeIdx]:Checked').each(function() {
arr.push($(this).val());
})
// 모두 선택되지 않았을경우 자동으로 전체가 체크되게 한다
if($('input:checkbox[name=fueltypeIdx]:checked').length == 0 && ($("#allfuel:checkbox" ).is( ":checked") == false )) {
setTimeout(function(){
$('#allfuel').iCheck('check')
},0);
//하나라도 체크를 하면 전체체크박스가 해제된다
}else {
setTimeout(function(){
$('#allfuel').iCheck('uncheck');
},0);
}
})
//검색버튼 대신 스크롤을 내리면 데이터를 로딩해오게 구현했다.
$(window).on('scroll', function() {
let scrTest = $(window).scrollTop();
if(Math.round(scrTest) == Math.round($(document).height() - $(window).height())) {
page++;
paging();
}
});
function paging() {
let carType = [];
let fuelType = [];
var keyword = "%"+$('#inputword').val() +"%";
$('input:checkbox[name=cartypeIdx]:checked').each(function() {
carType.push($(this).val());
})
$('input:checkbox[name=fueltypeIdx]:checked').each(function() {
fuelType.push($(this).val());
})
let selectList = {
"keyword" : keyword,
"typeList" : carType,
"fuelList" : fuelType,
"page" : page
};
$.ajax({
url: "searchlist",
data: selectList,
type: 'get',
dataType:'json',
success: function(result) {
getSearch(result);
carType = [];
fuelType=[];
},
error: function() {
alert('로딩 실패')
}
});
}
//체크박스에 체크시 실시간으로 리스트를 가져온다
$('[name=cartypeIdx]').on('ifChanged',getList);
$('[name=fueltypeIdx]').on('ifChanged',getList);
//페이지가 열리면 작동할 함수를 작성해준다
window.onload = getList();
function getList() {
let carType = [];
let fuelType = [];
page = 1;
$('input:checkbox[name=cartypeIdx]:checked').each(function() {
carType.push($(this).val());
})
$('input:checkbox[name=fueltypeIdx]:checked').each(function() {
fuelType.push($(this).val());
})
let selectList = {
"typeList" : carType,
"fuelList" : fuelType
};
//ajax통신을 사용해 연결한다
$.ajax({
url: "searchlist",
data: selectList,
type: 'get',
dataType:'json',
success: function(result) {
getSearch(result);
carType = [];
fuelType=[];
},
error: function() {
alert('통신 실패')
}
});
}나는 로딩할 정보를 ajax를 통해 구현했다. 나의 ajax사랑...
가지고 올 정보가 많기 때문에 json을 이용했다.
비동기 형식으로 새로고침없이 실시간으로 검색값이 나오고 체크박스값에 따라 페이지가 바뀐다.
<jsp>
<div id="list-type" class="proerty-th">
</div>이 부분에 본문 썸네일이 들어갈거다.
<컨트롤러>
@GetMapping("/searchlist")
@ResponseBody
public final static int BOARD_LIMIT = 9;
public final static int PAGE_LIMIT = 4;
//상세페이지 컨트롤러지만 여기서 썸네일에 필요한 addObject를 설정했기에 같이 작성한다
@GetMapping("/carlist/{idx}")
public ModelAndView viewVehicle(ModelAndView mv, @PathVariable String idx, Principal prin, HttpSession session) {
int index = Integer.parseInt(idx);
if(prin == null) {
mv.setViewName("reservation/details");
}else {
String username = prin.getName();
mv.addObject("info", mService.selectMypageOne(username));
}
mv.addObject("car", vService.getVehicleInfo(index));
mv.addObject("option", vService.getOptionInfo(index));
List<ReviewDto> rList= rService.selectOne(index);
session.setAttribute("vehicleIdx", index);
mv.addObject("rList",rList);
mv.setViewName("reservation/details");
return mv;
}
//이게 썸네일을 가져올 컨트롤러
public String getList(ModelAndView mv, @RequestParam(required=false) String page
, @RequestParam(value="typeList[]", required=false) List<String> typeList
, @RequestParam(value="fuelList[]", required=false) List<String> fuelList, String keyword) {
System.out.println("*********************");
System.out.println("!!!!!typeList!!!!!!!"+typeList);
System.out.println("!!!!!fuelList!!!!!!!"+fuelList);
System.out.println("*********************");
Map<String, Object> search = new HashMap<>();
search.put("typeList", typeList);
search.put("fuelList", fuelList);
if(page == null) {
page = "1";
}
int pagenum = Integer.parseInt(page)*BOARD_LIMIT;
search.put("page", pagenum);
search.put("keyword", keyword);
Map<String, Object> result = new HashMap<String,Object>();
result.put("carlist",vService.selectList(search));
System.out.println(keyword);
return new Gson().toJson(result);
}GetMapping으로 연결하고 ResponseBody어노테이션을 설정했다.
체크박스 값은 중복으로 선택가능하게 만들어서 hashMap으로 담았다.
검색조건 search를 HashMap으로 만들고 결과값 result HashMap에 담는다.
리턴은 Gson형태이다.
컨트롤러에는 RestController, RequestMapping 어노테이션을 설정하고 필요한 서비스를 Autowired로 DI주입했다.
//서비스(interface이다)
public List<VehicleReqDto> selectList();
public List<VehicleReqDto> selectList(List<String> carTypeList);
public List<VehicleReqDto> selectList(Map<String, Object> search);
//서비스impl(서비스를 implements, @Service어노테이션을 달아준다)
//dao를 Autowired해줬다.
@Override
public List<VehicleReqDto> selectList() {
return dao.selectList();
}
@Override
public List<VehicleReqDto> selectList(List<String> carTypeList) {
return dao.selectList(carTypeList);
}
@Override
public List<VehicleReqDto> selectList(Map<String, Object> search) {
return dao.selectList(search);
}
//dao(Repository어노테이션을 달아준다)
//sqlSession을 Autowired해줬다.
public List<VehicleReqDto> selectList() {
return sqlSession.selectList("vehicle.selectList");
}
public List<VehicleReqDto> selectList(List<String> carTypeList) {
return sqlSession.selectList("vehicle.selectList", carTypeList);
}
public List<VehicleReqDto> selectList(Map<String, Object> search) {
return sqlSession.selectList("vehicle.selectList", search);
}
<mapper>
<select id="selectList" resultType="VehicleInfo" >
WITH T AS
(SELECT ROW_NUMBER() OVER(ORDER BY V.IDX) NUM, V.*, F.TYPE AS FUELNAME, C.TYPE AS TYPENAME, L.NAME
FROM FUELTYPE F, CARTYPE C, VEHICLE V, LOCATION L
WHERE V.CARTYPE_IDX = C.IDX AND V.FUELTYPE_IDX = F.IDX AND V.LOCATION_IDX = L.IDX
<if test="typeList !=null">
AND C.IDX IN
<foreach collection="typeList" item="type" separator="," open="(" close=")">
#{type}
</foreach>
</if>
<if test="fuelList !=null">
AND F.IDX IN
<foreach collection="fuelList" item="fuel" separator="," open="(" close=")">
#{fuel}
</foreach>
</if>
<if test = "keyword != null">
AND V.MODEL LIKE #{keyword}
</if>
) SELECT * FROM T
WHERE NUM BETWEEN 1 AND #{page}
</select>
<js>
function getSearch(result) {
var html = '';
for(var i in result.carlist) {
var car = result.carlist[i];
html += '<div class="col-sm-6 col-md-4 p0">';
html += '<div class="box-two proerty-item">';
html += ' <div class="item-thumb">';
html += ' <a href="${pageContext.request.contextPath}/carlist/' + car.idx + '"><img src="' +car.image+ '" /></a> ';
html += ' </div>';
html += ' <div class="item-entry overflow" id="listbody">';
html += ' <h5><a href="/chazazo/details">' + car.model + ' </a></h5>';
html += ' <div class="dot-hr"></div>';
html += ' <span class="pull-left"><b> 대여지점 : ' + car.name + '</b> </span>';
html += ' <span class="proerty-price pull-right"> ' + car.price + '원</span>';
html += ' <p style="display: none;">Suspendisse ultricies Suspendisse ultricies Nulla quis dapibus nisl. Suspendisse ultricies commodo arcu nec pretium ...</p>';
html += ' <div class="property-icon">';
html += ' <img src="./resources/garoestate/assets/img/icon/clock.png">' + car.year + '년|';
html += ' <img src="./resources/garoestate/assets/img/icon/fuel.png">' + car.fuelname + '|';
html += ' <img src="./resources/garoestate/assets/img/icon/car.png">' + car.typename + ' ';
html += ' </div>';
html += ' </div>';
html += '</div>';
html += '</div>';
}
$('#list-type').html(html);
}
기본화면
(아직 이미지를 덜 넣었다)
체크박스를 체크하면
체크한 값을 list형태로 가져와 조건설정해서 가져온다.
검색어를 입력하면
검색한 글자가 포함된 결과를 비동기 형식으로 가져온다.
반응형
'프로그래밍 > html' 카테고리의 다른 글
| [spring]alert 이쁘게 꾸미기!!간단한 Sweetalert 사용 방법 (0) | 2023.04.29 |
|---|
댓글 영역