맵갤러리 조회 js 생성
$(document).ready(function() {
new test();
})
class test {
constructor() {
this.getMapList();
document.getElementById('menuTitle').innerHTML = '지도드림'; //메뉴명 하드코딩 (추후 삭제)
}
getMapList() {
$.ajax({
method : 'GET',
url : '/mapGale/work/getExportMapList.do',
datatype : 'json',
data : '',
context: this, // ajax를 this로 가르키는 것이 아닌 클래스를 this로 가르키게 된다.
success: function(res) {
this.draw(res);
},
error: function(e) {
console.log(e);
}
});
}
draw(param) {
let html = '';
const list = param.list;
list.forEach(item => {
html += `<div class="boxContainer" style="float: left; margin-right: 20px; margin-bottom: 20px; cursor: pointer;">
<div class="box">
<div class="boxWrap mapListItem">
<div class="bgArea" data-userMapId="${item.userMapId}" style="background:url(data:image/png;base64,${ item.base64 }) no-repeat; background-size:100% 100%; width: 300px; height: 300px;"></div>
<p style="font-size: 1.5em; background-color: lightgrey;">${ item.userMapSj }</p>
</div>
</div>
</div>`;
});
$('#listArea').html(html); //목록
$('#mapListCnt').text(param.cnt); //건수
// 동적으로 div가 만들어진 후에 이벤트를 붙임
const divList = document.querySelectorAll('.boxContainer');
divList.forEach(item => {
item.addEventListener('click', () => {
// 클릭 시 상세 조회 url 팝업창 이동
const mapId = event.target.dataset.usermapid
window.open(`/main/main.do?status=gallery&userMapId=${mapId}`);
})
})
}
}
JavaScript
복사
1.
js class 문법 사용
2.
빽틱(`) 사용
•
변수를 + 로 붙이지 않고 ${변수} 안에 넣어서 사용할 수 있음
•
줄바꿈 되어도 + 할 필요 없이 쭉 작성하면 됨
3.
html5 - data문법 사용
•
div 내에 data-userMapId="${item.userMapId}"
•
자식 요소를 선택하지 않고 div 내에 원하는 값을 줌으로써 편하게 호출 가능함
class 선언 후에 동적으로 만들어진 div를 호출 시 호출되지 않는 문제가 있었음
⇒ class 내에 div에 대한 이벤트를 붙임으로써 해결
•
실행 순서 문제
•
비동기인 ajax로 값을 불러오고, 그 밑 함수를 호출하려니 실행순서가 꼬인 것으로 보임
⇒ ajax에 async:false 값을 줘서 동기식으로 변경하면 해결 됐을 것!
지도 썸네일 img가 화면에 띄워지지 않는 문제
•
DB에 img 파일이 변환되어 저장되고 있었음
•
화면에 불러올 때 VO파일에서 (get, set으로 정의됨) 변환 후 화면에 출력
<div class="bgArea" data-userMapId="${item.userMapId}"
style="background:url(data:image/png;base64,${ item.base64 }) no-repeat;
background-size:100% 100%; width: 300px; height: 300px;"></div>
JavaScript
복사
