- 트리 형태의 데이터이며, 단순 들여쓰기로 표현됨.
- 한 줄 이상의 데이터는 표시되지 않으며, 클릭 시 펼칠 수 있도록 되어 있음.
- 테이블 가로 사이즈가 고정형이고, 가로스크롤바가 표시됨.
2. 요구사항
- 접고 펼 수 있는 트리 형태의 테이블
- 각 컬럼의 가로 사이즈를 조정 가능
- 컬럼의 가로 사이즈 조정시 다른 컬럼의 영향을 주지 않고, 테이블 전체 사이즈를 늘리고 줄일 수 있도록
- 기본적으로 전체 노드가 펼쳐진 상태
- 데이터의 내용이 왼쪽, 가운데, 오른쪽으로 정렬 가능
- 손 쉬운 사용
3. 구글링
- TreeTable : http://ludo.cubicphuse.nl/jquery-treetable/
- 트리 형태를 가장 단순하게 표현하고 있음.
- jQuery UI Resizable : http://jqueryui.com/resizable/
- 심플하면서 정말 강력함.
- $('table td).resizable(); 을 하면, 각각의 셀들을 조정할 수 있으나 화면의 가로사이즈 이상으로 늘릴 수 없음.
- Resizable Columns : http://dobtco.github.io/jquery-resizable-columns/
- 컬럼의 사이즈를 저장하고 있어서 재로딩 후에도 가로 값을 유지함.
- 컬럼 사이즈 조절시 다른 컬럼에 영향을 미침.
- 맨 오른쪽 컬럼의 사이즈를 조절 할 수 없음.
- jExpand : http://www.jankoatwarpspeed.com/expand-table-rows-with-jquery-jexpand-plugin/
- 이건 아닌 것 같음.
- DataTables: http://www.datatables.net/
- 데이터 정렬 기능과 페이징 말고는 없음.
- FixedHeaderTable : http://www.fixedheadertable.com/
- 정말 고정 헤더/푸터 기능 이외에는 없음.
- Felxigrid : http://flexigrid.info/
- 셀 가로 사이즈 조절 가능, 맨 오른쪽도 조절 가능.
- 세로의 고정, 자동 지원.
- 셀 위치 변경 가능.
- 셀을 켜고 끌 수 있음.
- 페이징 및 추가/삭제 기능.
- 고정 헤더 및 ajax 지원.
- Ingrid : http://reconstrukt.com/ingrid/
- 이것도 아닌 것 같음.
- TableSorter : http://tablesorter.com/docs/
- 심플하고 괜찮음.
- 기타 등등...
4. 프로토타입
- TreeTable + jQuery UI Resizable
- 잘 작동함.
- 가로 길이만 조절하면 되는데, 세로도 조절됨. 막는 코드가 필요함.
- 맨 오른쪽 셀을 조절 할 수 없음.
- TreeTable + Resizable Columns
- 잘 작동함.
- 가로만 조절 가능하기에 세로 조절을 막는 코드를 넣을 필요가 없음.
- 이것도 맨 오른쪽 셀을 조절 할 수 없음.
- 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. 결과물
.png)
