티스토리 뷰

Web Development/JQuery

jQuery $.data() 예제

dev ms 2016. 3. 29. 22:48
반응형


.data()

 

jQuery : .data( key ) - 값 세팅하기 

.data( key, value ) - 값 저장하기

[출처] [jQuery] .data()|작성자 렌보

 

.data는 위와 같은 기능이 있다.

 

따라서 현재 temp 같이 key,value로 저장하게 되면 화면에서 맵형식이 생기는 것이다.

처음에 가져온 태그를 변수에 저장 시킨뒤 원래 있던 내용은 삭제 시킨다. (하위 태그 <tr> <td>들)

이후에 변수에 담은 태그를 이용해서 그리드를 만드는 것이다.

 

*/

/* ajax json 호출 */
function getJson(){
 $.ajax({
  type: "post",
  url: "sample_json.html",
  data: "",
  dataType: "json",
  success: function(json){
   //alert(JSON.stringify(json));
   gridView("grid", json.data); // 첫번째 파라메터 : 그리드가 표현될 ID, 두번째 파라메터 : json 데이터
  }
 });
}
/* json Grid 구현 */
function gridView(gridTagId, data){
   //alert(data.length);
   $("#" + gridTagId).html(''); 
  for ( var i = 0; i < data.length; i++) {
   var gridTag = $("body").data(gridTagId); //setGridTag 함수에서 저장된 ROW 태그 GET
   //alert(prop);
   //alert(data[i]);
   //alert(var prop in data[i]);
   for (var prop in data[i]) {
    //alert(gridTag.split("COL_NAME_"+prop));
    gridTag = gridTag.split("COL_NAME_"+prop).join(data[i][prop]);  
    //alert(data[i][prop]);
   }
   $("#" + gridTagId).append(gridTag); 
  }
  
}
/*
 prop는 key값을 가져오는 것이다.
위에껄 해석하자면 json 형식은 리스트에 1행마다 맵이 담겨 있다고 보면 된다.
key, value로 들어가기 때문에.
gridTag.split("COL_NAME_"+prop) 하게되면 배열로 쪼개진다. 그 대상을 뒤에
.join하게 되면 합쳐지는 것이다.
.join시에는
배열[0] + 값 + 배열[1] 이런식으로 더해진다.
 
*/
</script>
</head>
<body>
<div id="MainLayer">
 <input type="button" value="ajax json 테이블 생성" onClick="getJson()" />
 <table width="500px" border="1px">
  <caption>json 그리드 예제</caption>
  <thead>
   <tr>
    <td>번호</td>
    <td>제목</td>
    <td>글쓴이</td>
   </tr>
  </thead>
  <tbody id="grid" gridTag="true">
   <tr>
    <td>COL_NAME_NUMBER</td>
    <td>COL_NAME_TITLE</td>
    <td>COL_NAME_USER_ID</td>
   </tr>
  </tbody>
 </table>
</div>
</body>
</html>


반응형
저작자표시

'Web Development > JQuery' 카테고리의 다른 글

jQuery.each() break; 방법  (0) 2016.03.29
jQuery Custom function 예제  (0) 2016.03.29
jQuery 다른 라이브러리에서 코드 빌려쓰기  (0) 2016.03.29
두개의 다른 라이브러리간 충돌 발생시 해결 방법 (jQuery cookbook 예제)  (0) 2016.03.29
jquery로 select box 만들어 보기  (0) 2016.03.29