Home  |     |  Blog  |  방명록    
  기초강좌  |   HTML/DHTML/CSS  |   Script  |   CGI with C  |   Language   |   TIP & Tech   |   개발자 에세이  

8. 동적 테이블(Data Binding)

8.2 동적 테이블 정렬

  앞에서 테이블을 동적으로 만들어 봤다. 그러나 우리는 여기서 만족하지 못한다. 동적 생성에 추가로 동적 정렬 즉, 웹서버의 도움없이도 자동으로 컬럼별로 눌러질 때마다 정렬하고 싶다. 된다!

 정렬하고자 하는 내용을 담은 sort.txt라는 파일은 다음과 같다. ( 여기서 사용되는 파일은 첫째줄의 모양이 좀 다르다는 점을 주의 깊게 보자. )

No:INT,Name,Age,Address,Point:FLOAT
11,홍길동,11,여기저기,0.567
2,둘리,22,원시지구,1.555
7,deadfire,100,korea,3.64
1,David,33,america,10


  위의 파일의 첫째줄에 해당 컬럼이 문자인지 숫자(정수,실수)인지를 명시해야 한다. 명시하지 않으면 자동으로 문자열로 인식을 해서 Age의 경우 정렬하게 되면, 100, 11, 22, 33순으로 정렬된다. 그에 비해 No는 INT로 선언되어있으므로 1, 2, 7, 11순으로 정렬된다.

  앞 장에서 사용했던 동일한 CLASSID를 이용해서 다음과 같은 예제를 만들 수 있다. 테이블의 헤더를 클릭하게 되면 동적으로 정렬되는 것을 볼 수있다.

<object classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" width="1" height="1" id="clist" border="0">
<param name="DataURL" value="sort.txt">
<param name="UseHeader" value="True">
</object>

<table border=1 datasrc="#clist">
<THEAD>
   <tr>
     <td><div id="no"><b>No</b></div></td>
     <td><div id="nam"><b>Name</b></div></td>
     <td><div id="age"><b>Age</b></div></td>
     <td><div id="address"><b>Address</b></div></td>
     <td><div id="point"><b>Point</b></div></td>
   </tr>
</THEAD>
<TBODY>
   <tr>
     <td><DIV DATAFLD="No"></DIV></td>
     <td><DIV DATAFLD="Name"></DIV></td>
     <td><DIV DATAFLD="Age"></DIV></td>
     <td><DIV DATAFLD="Address"></DIV></td>
     <td><DIV DATAFLD="Point"></DIV></td>
   </tr>
</TBODY>
</table>

<script>
function noClick(){
clist.Sort = "No"; clist.Reset();
}
no.onclick = noClick;
function namClick(){
clist.Sort = "Name"; clist.Reset();
}
nam.onclick = namClick;
function ageClick(){
clist.Sort = "Age"; clist.Reset();
}
age.onclick = ageClick;
function addressClick(){
clist.Sort = "Address"; clist.Reset();
}
address.onclick = addressClick;
function pointClick(){
clist.Sort = "Point"; clist.Reset();
}
point.onclick = pointClick;
</script>
No
Name
Age
Address
Point

  * Age의 경우는 INT로 선언(sort.txt파일안에서)되지 않아서 String순서로 정렬된다.

  앞절의 예와 비교하여 특이한 사항만을 보면,

  • INT,FLOAT : 각 Column의 특성은 INT, FLOAT와 같은 특성을 줄 수 있으며, 아무것도 적지 않으면 문자열로 인식한다.

  • THEAD : 클릭하면 반응할 수 있도록 THEAD의 항목에 DIV Tag를 써서 ID를 지정했다.

  • no.onclick = noClick : DIV Tag ID이름이 no인 항목이 click됐을 때 불 리는 함수 noClick을 만들어서 연결시킨다.

  • Sort/Reset : 해당 ActiveX객체의 내장 함수인 Sort함수와 Reset함수를 사용한다.

  앞의 예보다 멋진 기능을 갖게 되었다. 즉, 기존의 CGI를 사용하게 되면 한번 깜박이는 ( 서버에서 다시 계산을 하는) 시간이 없어지게 되는 것이다. 사용자는 그 시간만큼을 벌 수 있어서 빠른 성능을 가진 당신의 사이트에 푹빠질 것이다

    Active X   웹상에서 수많은 사람들이 C, C++, Visual Basic등과 같은 언어로 ActiveX를 개발하여 배포하고 있다. 마이크로 소프트사는 이러한 ActiveX를 얻을 수 있는 추천사이트로 http://www.activex.com 사이트를 지정하고 있다. 거기에 이메일아이디를 적어두면 항상 새로운 소식을 받아볼 수 있을 것이다.

- Last Update : 2001.7.2 by Deadfire(http://www.deadfire.net)
DHTML 강좌
DHTML이란?
CSS
     - CSS정의방법
     - 적용우선순위
     - 텍스트관련속성
     - 텍스트간의설정
     - 여백 지정하기
     - 테두리지정하기
     - 색상 지정하기
     - 기 타
CSS그룹핑
     - 스타일시트그룹
     - 클래스
     - 사용자지정스타일
JSSS
     - 새로추가된JSSS객체
     - JSSS와CSS간의비교
Layer
     - Layer Tag의사용
     - Layer 세부사항
     - Explorer용Layer
Javascript와연동
동적인 변화
     - 텍스트/이미지변환
     - 위치 이동
동적 테이블
     - 동적테이블생성
     - 동적테이블정렬
기 타
     - Font Download
     - Filter
마치며
Copyright ⓒ 1997 ~, Deadfire Program Master