[cygnus] grid component
DESCRIPTION
TRANSCRIPT
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