My/Story

아쿠아 웹그리드 삽질기.....

알찬돌삐 2007. 11. 27. 20:53
http://www.i-swear.com/402

http://www.i-swear.com/405


에효...이거 하나 가지고 지금 몇일째인지. 2주 다 되어가는거 같은데.

하긴 이거 하나 붙잡고 있는거 아니니 근무시간에 회사 일 하면서 남는 시간에 톡박질 좀 하다가

인터넷 좀 하다가 코딩 한 두줄 하고 다시 톡박질 -_-.... ㅋㅋㅋ 원래 그렇긴 한데 ㅡ_ㅡ;

이번엔 좀 시간이 많이 지체되네.

처음 기획부터 잘못되었으니 이 지경까지 된건 당연한거고 ㅡㅡ;

아무생각없이 코딩부터 시작했으니깐 뭐.

1차 기획
 - 최대한 기존에 만들어진 테이블을 손대지 않는 방향으로 하기 위해.
 - 테이블 노드 탐색하여 THEAD 에서 TH 태그를 전체 복사. (없으면 TBODY 의 TH 태그 복사. 그래도 없으면
   TBODY 의 첫번째 TR 의 TD를 복사하여 absolute 레이어 생성.
 - 테이블 레이어 scroll 이벤트에 위에서 복제한 노드를 테이블 레이어의 최상단에 위치하게 하기.
 - 테이블이 복제 되었다면 keyup , keydown 이벤트 캡쳐하여 선택된 TD 의 좌표 이동

문제점
 - 스크롤 급하게 하거나 IE 에서 키보드 이벤트를 캡쳐하여 좌표 이동시 상단 absolute 레이어가 이동하는게 눈에 보임
 - 영 뭔가 삐리함... 그냥 그럼 . 느낌이. 뭔가 어디서 부하가 굉장히 걸리는듯하고 ㅡ_ㅡ.

2차 기획
 - 1차 기획에서 조금 손대어서 변경 (왜냐 - 기존 소스 손대기 싫어서....)

문제점
 - 데이터양이 많아지면 IE 에서 굉장히 버벅이는 현상 발생. ( FF 괜찮음 )
   약 100건부터 버벅이기 시작하면서 3000천 정도 테이블 복제하면 브라우저가 뻗다시피하는 현상
   Extjs 의 Grid 소스로 테스트 3천건에 브라우저 뻗어버림 -_-; 브라우저 응답 없음.

3차 기획
 - 다 뜯어고쳐야 될 필요성 느낌
 - 데이터의 갯수가 50~100건 이상시 페이지를 나누어야 될 필요성
 - 미리 그려진 테이블을 복제하는게 아니라 DOM 을 이용하여 직접 테이블태그를 작성
 - 상단 헤더를 absolute 된 상태에서 onscroll 로 제어하는게 아니라 별개의 레이어로 만들어서 onscroll 을
    이용하여 좌우 스크롤시만 레이어 이동하게 변경

문제점

 - 아직 모름.... 진행중.
.