[Cygnus] grid component

33 %
67 %
Information about [Cygnus] grid component

Published on March 11, 2014

Author: HwayoungLee3

Source: slideshare.net

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

jqGrid vs Datatables

Add a comment

Related pages

Grid component - UIkit documentation

Grid. Create a fully responsive, fluid and nestable grid layout. The grid system of UIkit follows the mobile-first approach and accomodates up to 10 grid ...
Read more

Grid System

Grid Wrapper. To use the grid system, add the class .slds-grid to an element, component, or page layout. Each grid is independent of other nested grids.
Read more

ASP.NET Grid Control, Telerik ASP.NET Gridview

The Telerik ASP.NET AJAX gridview component provides everything from paging, sorting, filtering and data editing to grouping and hierarchy.
Read more

Material Design Lite

COMPONENTS Material Design Lite ... The Material Design Lite (MDL) grid component is a simplified method for laying out content for multiple screen sizes.
Read more

TMS Component Pack - TMS Software | VCL Components for ...

Components for software development with Embarcadero Delphi, C++Builder and Microsoft Visual Studio
Read more

JGrid Joomla! Datagrid Component Now Available

JGrid Version 4.41 was Released on 10/16/2015. JGrid! Features. Data Grid Frontend - An spreadsheet like data grid capability for Joomla Websites in a TAB ...
Read more

Components Grid

Components Grid is fast growing electronic and electrical components, parts distributor.
Read more

grid - Components - ComponentSource - Software Superstore ...

Components. Software components and controls are pre-built software libraries that you can use in your application to add new functionality. By adding ...
Read more

Grid Component : Alphapedia

clearSearchForm() Clears the Search part form and removes the filter that was ... If this component was opened from a parent Grid or Dialog component, ...
Read more

Grid Component Example - vue.js

Grid Component Example. This is an example of creating a reusable grid component and using it with external data.
Read more