2013년 7월 10일 수요일

TreeGridTable 개발 공유

1. 기존 Table
  • 트리 형태의 데이터이며, 단순 들여쓰기로 표현됨.
  • 한 줄 이상의 데이터는 표시되지 않으며, 클릭 시 펼칠 수 있도록 되어 있음.
  • 테이블 가로 사이즈가 고정형이고, 가로스크롤바가 표시됨.


2. 요구사항
  • 접고 펼 수 있는 트리 형태의 테이블
  • 각 컬럼의 가로 사이즈를 조정 가능
  • 컬럼의 가로 사이즈 조정시 다른 컬럼의 영향을 주지 않고, 테이블 전체 사이즈를 늘리고 줄일 수 있도록
  • 기본적으로 전체 노드가 펼쳐진 상태
  • 데이터의 내용이 왼쪽, 가운데, 오른쪽으로 정렬 가능
  • 손 쉬운 사용

3. 구글링
4. 프로토타입
  1. TreeTable + jQuery UI Resizable
    • 잘 작동함.
    • 가로 길이만 조절하면 되는데, 세로도 조절됨. 막는 코드가 필요함.
    • 맨 오른쪽 셀을 조절 할 수 없음.
  2. TreeTable + Resizable Columns
    • 잘 작동함.
    • 가로만 조절 가능하기에 세로 조절을 막는 코드를 넣을 필요가 없음.
    • 이것도 맨 오른쪽 셀을 조절 할 수 없음.
  3. TreeTable + Felxigrid
    • 잘 작동함, 단 TreeTable을 선행 후 Felxigrid를 수행해야 함.
    • 가로만 조절 가능하며, 맨 오른쪽 셀도 조절 가능 함.
    • 기본 디자인 괜찮음.

5. 결론 및 개발 전략
  • 프로토타입 3번 조합으로 결정
  • Node.js + Grunt(Javascript Task Runner such as Ant http://gruntjs.com/) + Bower(Package Manager for the web such as Gem, NPM http://bower.io/) 을 이용하여 개발
  • TreeTable과 Flexigrid는 Github에 등록되어 있음, 해당 js+css 파일만 복사해오는 방법이 있으나 그러지 않고, Bower에 패키지를 등록하여 설치/관리 하도록 함.
  • 두 라이브러리가 일부 기능 변경이 될 수 있으므로 제 github로 Fork 한 뒤에 Bower에 등록한다.
  • demo(데모), docs(문서), src(개발), test(유닛테스트) 등의 폴더 구조를 갖는다.
6. 결과물