[Cygnus] grid component

Cygnus

기존 Polestar Grid 문제점

컬럼 넓이가 조절되지 않음

다중 정렬이 되지 않음

하나의 셀에 데이터가 많을 경우 가독성이 떨어짐

컬럼 헤더 고정이 되지 않음

Inline-Edit 기능 구현시 개발 공수가 크고 , 사용성이 떨어짐

원하는 컬럼만 선택해서 볼 수 있는 기능이 없음

Cygnus Grid 기능 요구사항

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

Hot Data Grid Items(jQuery 기반 )

Google Trends 검색결과

jqGrid

jQuery UI 기반

Grid 관련 거의 모든 기능 지원

국내 개발자들이 많이 사용중

http://www.trirand.com/blog/

Datatables

기본 기능 외 Plugin 을 통한 수많은 확장 기능

Tapstery5 에 포함된 라이브러리

Documentation 및 Tutorial 이 잘 되어 있음

https://datatables.net

SlickGrid

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

jqxGrid in jqWidget

jQuery-UI 기반의 UI Framework 인 jqWidget 에 포함된 Grid 컴포넌트

Cell 안에 Custom SelectBox 을 넣을 수 있는 등 jqWidget 안에 있는 Widget 들을 Grid 에서 사용할 수 있음

Sencha ExtJS 와 유사 상용 제품

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 고정

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 렌더링

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 기능 지원

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

jqGridvs

Datatables