728x90
반응형
* Jsp에 데이터를 뿌릴 Templeate을 미리 만들고 jQuery로 데이터 뿌리기
1) Jsp
=> 화면단에 데이터 리스트를 뿌릴 화면단(template)을 미리 만든다.
|
<!-- 경기도 상세정보 화면 CopyTemplate -->
<table id="copyGgTemplate" style="display: none;">
<tr align="center">
<td>구분</td>
<td id = "category" ></td>
</tr>
<tr align="center">
<td>관측소명</td>
<td id = "spot_nm" ></td>
</tr>
<tr align="center">
<td>시군구코드</td>
<td id = "sigun_cd" ></td>
</tr>
<tr align="center">
<td>시군구명</td>
<td id = "sigun_nm" ></td>
</tr>
<tr align="center">
<td>설치주소</td>
<td id = "legaldong_nm" ></td>
</tr>
<tr align="center">
<td>경도</td>
<td id = "wgs84_lon" ></td>
</tr>
<tr align="center">
<td>위도</td>
<td id = "wgs84_lat" ></td>
</tr>
<tr align="center">
<td>공간정보</td>
<td id = "geom"></td>
</tr>
</table>
|
2) jQuery
- var template = $("#copyGgTemplate TR").clone();
=> id가 copyGgTemplate의 TR을 Clone(복사) 하여 template에 담는다
- template.find("#category").text(data.Dto.category);
=> template에서 id 값을 find함수를 사용하여 찾아 보여주고자 하는 데이터를 넣는다.
- $("#dataTable").append(template);
=> template에 데이터를 다 삽입 했을 경우 최종적으로 뿌릴 곳에 template를 넣는다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
function article(spot_no, category) {
$.ajax({
type : "POST",
data : {
"spot_no" : spot_no,
"category" : category
},
url : "/test/boardArticleJson.do",
success : function(data) {
$("#dataTable").html("");
if(data.RESULT == "SUCCESS"){
if (data.Dto.category == "경기도") {
var template = $("#copyGgTemplate TR").clone();
template.find("#category").text(data.Dto.category); // 구분
template.find("#spot_nm").text(data.Dto.spot_nm + " 관측소"); // 관측소명(지점명)
template.find("#sigun_cd").text(data.Dto.sigun_cd); // 시군구
// 코드
template.find("#sigun_nm").text(data.Dto.sigun_nm); // 시군구명
template.find("#legaldong_nm").text(data.Dto.legaldong_nm);// 법정동명(설치주소)
template.find("#wgs84_lon").text(data.Dto.wgs84_lon);// 경도
template.find("#wgs84_lat").text(data.Dto.wgs84_lat);// 위도
template.find("#geom").text(data.Dto.geom);// 공간정보
$("#dataTable").append(template);
$("#bbsList").hide();
$("#article").show();
// map을 띄울 자리
map(data.Dto);
// Create chart instance
CreateGgChart(data);
}
}else{
alert(data.MSG);
}
}
});
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
728x90
반응형
'IT 개발 > JavaScript' 카테고리의 다른 글
| 11.11 이벤트와 이벤트 처리기 (0) | 2019.11.11 |
|---|---|
| 11.11 (0) | 2019.11.11 |
| jQuery/Ajax (3) : 데이터 목록 뿌리기 AND 페이징 처리 (0) | 2019.09.01 |
| Javascript FOR문 (0) | 2019.09.01 |
| jQuery/Ajax (2) : trigger, handler (0) | 2019.08.16 |