1. Cygnus

2. 기존 Polestar Grid 문제점
 컬럼 넓이가 조절되지 않음
 다중 정렬이 되지 않음
 하나의 셀에 데이터가 많을 경우 가독성이 떨어짐
 컬럼 헤더 고정이 되지 않음
 Inline-Edit 기능 구현시 개발 공수가 크고 , 사용성이 떨어짐
 원하는 컬럼만 선택해서 볼 수 있는 기능이 없음

3. Cygnus Grid 기능 요구사항
 데이터 바인딩이 간단하고 쉬워야 함
 컬럼 넓이 조절 지원
 다중 정렬 지원
 컬럼 헤더 고정 지원
 다중선택 (Checkbox) 지원
 Inline-Edit 기능 지원
 컬럼별 숨김 기능 지원
 검색 또는 필터 기능 지원
 셀 내에 아이콘 또는 링크 삽입 기능 지원
 페이징 및 페이지당 표시 개수 기능 지원
 사용자별 변경내용 저장 기능
 Bootstrap CSS 스타일 지원

4. Hot Data Grid Items(jQuery 기반 )
Google Trends 검색결
과

5. jqGrid
 jQuery UI 기반
 Grid 관련 거의 모든 기능 지원
 국내 개발자들이 많이 사용중
 http://www.trirand.com/blog/

6. Datatables
 기본 기능 외 Plugin 을 통한 수많은 확장 기능
 Tapstery5 에 포함된 라이브러리
 Documentation 및 Tutorial 이 잘 되어 있음
 https://datatables.net

7. SlickGrid
 대용량 데이터 처리시 성능이 좋음
 Cell 내 막대 , 라인 차트 지원
 Cell 하이라이팅

8. jqxGrid in jqWidget
 jQuery-UI 기반의 UI Framework 인 jqWidget 에 포함된 Grid 컴포넌트
 Cell 안에 Custom SelectBox 을 넣을 수 있는 등 jqWidget 안에 있는
Widget 들을 Grid 에서 사용할 수 있음
 Sencha ExtJS 와 유사
 상용 제품

9. Grid Component Comparision
jqGrid Datatables
Data Binding JSON, XML, Array Data JSON, XML,
Array Data, DOM
Multi-Sorting 지원 ( 헤더 클릭시 순차적으로 설
정됨 )
지원 (Shift + 클릭으로 소팅할 항
목들 지정 )
Paging Style 지원 ( 기본적으로
“ 1 of 10” 형태 , “1 2 3..” 등의
형태는 커스터마이징 코딩 필요
디폴트는 이전 , 다음 버튼 형태 ,
option 을 정의하여 “ 1 2 3..” 형태
로 전환 가능
Column Resizing
(Auto)
autowidth 속성을 두어 각 컬럼
내용의 길이에 따라 자동으로 컬럼
넓이 조정 가능
width=100% 를 주게되면 자동으로 넓
이 조정됨
Column Resizing
(User)
지원 ColReorder Plugin 으로 지원
Fixed Header &
Column
기본적으로 Header 고정 ,
colModel 에 속성을 이용하여
Column 고정
FixedHeader Plugin 을 이용하여
Header, Column 고정

10. Grid Component Comparision( 계속 )
jqGrid Datatables
Multiple Selection 지원
- multiselect 옵션을 이용하며 ,
설정되면 그리드 좌측에 체크박스
가
표시됨 ( 전체 선택 / 해제 기능 지
원 )
지원
- 체크박스를 표시하기 위해서는 라
이브러리 소스에 별도 작업이 필요
Inline-Edit cell 및 row 에디트 지원 cell 및 row 에디트 지원
Hiding Column Column Chooser 기능으로 지원 ColVis Plugin 기능으로 지원
Search & Filter 컬럼별로 연산 조합이 가능한
Complex Search 기능 지원 , 각
컬럼별 필터 (Text, DatePicker,
SelectBox) 지원
전 컬럼을 검색하는 Search Box 외
Grid 외부에서 컬럼별 검색을 지원
하기 위해 별도 코딩 필요 , 필터는
text 와 Selectbox 형태로 각 컬럼
별로 지원 (Plugin 사용시
DatePicker 도 가능 )
Column
Rendering
(Image, Link, ...)
HTML 렌더링 HTML 렌더링

11. Grid Component Comparision( 계속 )
jqGrid Datatables
State Saving
(Sort, Show/Hide
Column 등 )
HTML5 Local Storage 등을 이용하
여 개발자가 직접 구현필요
지원 (Cookie, Local Storage)
Infinite Data
Loading(while
Scrolling)
지원 지원
Tree Grid 지원 JQuery 의 Treeable 로 지원하는 듯
하나 R&D 필요
Tooltip 기본적으로 HTML Tooltip 으로 표
시됨 , 빼려면 별도 옵션을 주면
됨
Floating Div 형태의 툴팁 표시 가
능
Nested Grid subGridModel 형태로 지원 기본 자료구조로는 지원하지 않고 ,
fnOpen/fnClose 로 Drill-down 형
태로 구현 가능
Export Excel, PDF
and etc.
jqGrid 에서 excelExport 등의 기
능을 이용하여 서버 (Spring) 측에
서 POI 등의 툴을 이용하는 방식
으로 지원
클라이언트 단에서 Export 기능 지
원

12. Grid Component Comparision( 계속 )
jqGrid Datatables
Bootstrap
Support
jQueryUI 기반으로 제작되었으나 ,
최근 트윅을 이용하여 Bootstrap
적용이 가능해짐
지원
Tapestry Support Tapestry 5.3.7 버전까지는
tapestry5-jquery-jqgrid
integration module 이 있음
Tapestry Component 에 포함되어 있
어 Tapestry 기본 Grid 와 동일한
문법으로 사용 가능 . Datatables
기본 기능 외 추가적인 기능들 (eg.
TreeGrid 등 ) 은 별도 js Library
를 추가하여 별도 Component 를 만
들어야 할 것 같음
License MIT or GPL Dual GPLv2 or BSD

13. jqGrid
vs
Datatables