CyberI 제품소개/UI컴포넌트

[웹포넌트 그리드] 일반 HTML 테이블의 한계를 뛰어넘는 데이터 그리드!

CyberI 2015. 12. 11. 18:26

 

[웹포넌트 그리드] 

일반 HTML 테이블의 한계를 뛰어넘는 데이터 그리드!

 


 

 

 

Q1. 데이터 그리드는 왜 사용할까요?

 

데이터를 표현하기 위해서 일반 HTML 테이블을 쓰는 것은 보편적인 관행이었습니다. 데이터에 레코드가 많지 않거나 데이터를 사용자가 조작하게 하고 싶지 않는 한 일반적인 테이블을 사용해도 전혀 문제가 없습니다. 그러나 테이블에 수 백 건의 레코드를 사용하는 웹 애플리케이션을 구축할 때라면, 일반 HTML 테이블로 데이터를 표현하는 데에 아주 큰 사용상 결함을 겪게 될 것입니다. 

 

예를 들어, 일반 테이블로 1000건의 데이터를 표현한다고 가정해보겠습니다. 하나의 로우(<tr>)당 30px 이라고 한다면, 제목(thead)영역까지 포함하여 테이블의 길이는 30,030px이 될 것입니다. 24인치 모니터로 웹 페이지를 볼 때 스크롤을 사용하지 않고 한 번에 볼 수 있는 높이는 약 1000px 정도 입니다. 30,030px이라면 모니터 화면을 세로로 30개나 붙인 것과 유사한 길이 입니다. 만약 사용자가 이 정도로 길이가 긴 페이지에 접속했다면 엄청난 스압(스크롤 압박)을 견디지 못하고 바로 뒤로가기를 눌러버릴 것입니다. 게다가 렌더링하는 시간도 길어져 성능상의 문제도 발생하겠죠.

 

정렬, 필터링, 검색, 인라인 에디팅같은 기능들을 일반 HTML 테이블로 사용하기는 힘듭니다. 이와 같은 일반 HTML 테이블의 한계를 뛰어넘어, 대용량의 데이터를 표현하고 조작하는 데에 수월하기 위해 '그리드'를 사용하는 것입니다. 데이터 그리드는 정렬, 필터링, 검색, 페이지네이션, 심지어 인라인 에디팅 같은 기능을 제공함으로써 큰 데이터셋을 가진 HTML 테이블과 관련한 작업들을 수월하게 만들어줍니다.

 

 

Q2. 데이터 그리드는 어떻게 추가시킬 수 있나요?

 

 일반적인 테이블에 데이터 그리드 기능을 추가할 수 있는 방법은 두 가지가 있습니다. 첫번째 방법은 사용자가 테이블 데이터를 조작할 수 있도록 해주는 PHP나 .NET 같은 서버사이드 스크립팅을 사용하는 방법입니다. 두번째 추천하는 방법은 자바스크립트를 사용하여 테이블에 그리드를 바인드하는 것입니다.

 

 

Q3. 웹포넌트 그리드는 어떤 방식으로 작동하나요?

 

 웹포넌트 그리드는 위에서 언급한 두 가지 방법 중 두번째 방법인 자바스크립트를 사용하여 테이블에 그리드를 바인드시키는 방법으로 작동합니다. 기본적인 HTML 테이블 마크업을 작성하고, 스크립트를 이용하여 그리드를 초기화시키면 정적인 HTML 테이블이 그리드로 탈바꿈하게 됩니다. 그리드에 들어가는 데이터는 ajax를 사용해 비동기 방식으로 가져오며, 얻은 데이터를 웹포넌트 그리드의 appendRow 함수의 인자로 넘겨주면 그리드에 로우를 생성합니다. 다음은 웹포넌트 그리드를 초기화하는 예제 코드입니다.

 

<HTML 코드>

 

  1.            <table id="grid-table-1">
  2.  
  3.             </table>
  4.  
  5.             <script id="grid-template-1" type="text/template">
  6.                 <table width="100%" height="350px">
  7.                     <thead>
  8.                         <tr>
  9.                             <th name="col1" align="center">col1</th>
  10.                             <th name="col2" align="center">col2</th>
  11.                             <th name="col3" align="center">col3</th>
  12.                         </tr>
  13.                     </thead>
  14.                     <tbody>
  15.                         <tr>
  16.                             <td name="col1" bind="col1"></td>
  17.                             <td name="col2" bind="col2"></td>
  18.                             <td name="col3" bind="col3"></td>
  19.                         </tr>
  20.                     </tbody>
  21.                 </table>
  22.             </script>

 

<script 코드>

  1. var table1 = $('#grid-table-1');
  2. var template1 = $('#grid-template-1');
  3. var grid = webponent.grid.init(table1, template1);
  4. $.ajax({
  5.     dataType : 'json',
  6.     url : 'testData.json',
  7.     success : function (resp) {
  8.          grid.appendRow(resp);
  9.     }
  10. });
 
사용 방식이 아주 간단합니다. 단 몇줄의 javascript 추가만으로 일반적인 테이블 요소가 그리드로 바뀌게 됩니다. bind 속성은 ajax로 호출해오는 데이터의 키와 동일하게 하면 됩니다. 그러면 키에 맞는 value 텍스트가 테이블에 바인딩 되어 td 안으로 들어가게 됩니다. 
 
Q4. 웹포넌트 그리드에는 어떤 기능들이 있나요?
 
웹포넌트 그리드의 기능은 데이터 바인딩테마 변경컬럼 조작(리사이즈, 고정, 숨기기, 이동, 소팅, 필터링, 그룹화 등), 로우 조작(검색, 순서변경, 삭제, 렌더링 콜백, 멀티로우 등), 셀 편집페이징(서버, 클라이언트, 슬라이더 형식, 스크롤), Export(pdf, excel, csv), 이벤트 추가, 플러그인 등이 있습니다. 데이터 바인딩은 위에서 기본 예제코드를 통해 설명했기 때문에 템플릿 테마 변경부터 각각의 주요 기능에 대해 살펴보도록 하겠습니다. 
 
 
1. 테마 변경
웹포넌트 그리드는 총 6개의 테마를 포함하고 있습니다. 테마별로 각각의 css 파일을 제공하고 있습니다. 따라서 테마를 변경하실 때는 다른 수정작업 없이, import 하는 css 파일만 해당 테마의 css 파일로 설정해주기만 하면 됩니다. 

 


 

 

 

 

 

 

 

 

2. 컬럼 조작
 
2-1. 리사이즈 

컬럼과 컬럼 사이 테두리에 마우스를 올려놓으면 크기를 조절할 수 있습니다.  이 기능은 셀에 정보가 매우 길어서 보이지 않는 경우에 유용하게 사용할 수  있습니다.

 

 
2-2.고정 
컬럼의 인덱스를 인자로 넘겨서 setFixedColumn()이라는 그리드 함수를 호출하면 스크롤 영역에서 배제되어 그 자리에 고정되게됩니다. 컬럼이 많을 경우 왔다갔다 하면서 확인하지 않고, 특정 컬럼을 고정시켜 놓으면 매우 편하겠죠? 아래 코드에서 grid는 초기화를 통해 생성된 그리드 object를 의미합니다.
 
  1. grid.setFixedColumn(index);

 

 

 

 

2-3.숨기기

 

생성된 그리드에서 숨기고 싶은 컬럼은 setColumnVisibility() 함수를 통해 표시 여부를 설정할 수 있습니다. 다음은 그리드의 함수를 사용해서 특정 컬럼을 보이게 하는 함수와 숨기는 함수를 작성한 예제 코드 입니다.

 

  1. var columnNames = grid1.getColumnNames();
  2.  
  3. function hideColumn () {
  4.   var index = 1;
  5.   grid1.setColumnVisibility(columnNames[index]false);
  6. }
  7.  
  8. function showColumn () {
  9.   var index = 1;
  10.   grid1.setColumnVisibility(columnNames[index]true);
  11. }
  12.  

 

 

2-4.이동

특정 컬럼들의 위치를 이동시키는 기능입니다. 변경하려는 인덱스를 가진 컬럼 이름을 swapColumn의 인자로 넘겨주어 사용할 수 있습니다. 아래는 예제 코드입니다.
 

 

  1. var columnNames = grid1.getColumnNames();
  2.  
  3. function swapColumn () {
  4.  
  5.   var index1 = parseInt($('#column-index-1').val()) - 1;
  6.   var index2 = parseInt($('#column-index-2').val()) - 1;
  7.   grid1.swapColumn(columnNames[index1], columnNames[index2]);
  8. }

 

 
 
 2-5.소팅 

특정 컬럼의 값들로 정렬 시키는 기능입니다. 컬럼명 옆에 있는 작은 화살표를 누르면 그 컬럼의 값들로 재정렬됩니다. 만약 정렬을 원치 않는 컬럼일 경우에는 기본 테이블 마크업에 'sortable="false"' 속성을 주면 그 컬럼에는 정렬 화살표가 생기지 않습니다.

 

 

 2-6.필터링

이건 정말 편리한 기능입니다. 검색 기능이라고 봐도 무방할 것 같습니다. 특정 컬럼에서 원하는 값으로 필터링을 하면 필터링한 조건에 해당하는 로우들만 남게 됩니다. 위의 예제는 1번째 컬럼에서 '파'라는 글자가 들어간 로우만 필터링을 한 결과입니다. 아래는 예제 코드로, filterColumn() 함수에 해당하는 컬럼명과 key값을 넘겨주면 됩니다.
 
  1. var columnNames = grid1.getColumnNames();
  2. var index = 0;
  3. var key = '파';
  4. grid1.filterColumn(columnNames[index], key);
  
 
3. 셀 편집

 

셀 편집 기능은 흔히 '인라인 에디팅'이라고도 말하며, 그리드에서 직접 값을 편집할 수 있도록 해줍니다. 해당 셀을 클릭하면 커서가 생기면서 편집할 수 있게 됩니다. 사용자가 값을 조작하도록 만들 때 아주 유용하게 쓰일 수 있겠습니다.
 
4. 페이징
 
 페이징 방식에는 클라이언트에서 처리하는 방식과 서버에서 처리하는 방식 두 가지가 있습니다. 클라이언트 페이징 방식은 그리드를 초기화할 때, 페이징에 대한 옵션 정보를 담은 object를 초기화 함수의 인자로 넘겨주어 페이징 영역을 생성합니다. 서버 페이징 방식은 그리드를 초기화한 후, 제공하는 UI 플러그인을 사용하여 페이징 영역을 생성합니다.
 
클라이언트 페이징은 원하는 정보를 한 번에 가져와서 특정 페이지에서 나오는 데이터만 보여주는 방식입니다. 서버 페이징은 페이지 번호를 누를 때마다 번호에 맞는 데이터를 새롭게 조회하여, 그리드에 이전 값을 제거하고 새로 받아온 데이터를 추가시키는 방식으로 처리합니다. 서버 페이징이 코드는 조금 더 복잡해지지만, 데이터 건수가 많은 경우 해당 페이지의 데이터만 조회하므로 성능상의 이점이 있습니다.
 
아래 캡쳐 사진에는 일반적인 번호 형식의 페이징 처리가 되어있지만, 슬라이더 형식도 있으며 새 페이지로 전환될 때 애니메이션을 줄 수도 있습니다. 웹포넌트 퍼블리셔에서 좌측 메뉴 중 grid demo를 선택하고 '페이징 슬라이더'와 '페이징 애니메이션' 메뉴를 확인하실 수 있습니다.
 

 

5. Export
 
 또 하나의 매우 유용한 기능은 바로 생성한 그리드를 csv, excel, pdf로 export 할 수 있다는 것입니다. 엑셀의 경우 파일명과 시트명을 정해서 추출할 수 있습니다. 아래와 같은 등략율 순위 데이터 그리드를 csv, excel, pdf로 추출하여 첨부해 두었습니다. 결과물이 궁금하신 분들은 다운로드를 받아서 확인해 보실 수 있습니다. 

 

등락율순위.csv
다운로드
등락율순위.pdf
다운로드
등락율순위.xls
다운로드

 

지금까지 웹포넌트 그리드의 기능들을 대략적으로 살펴보았습니다. 포스팅이 너무 길어지는 관계로 이 정도만 언급하였지만, 사실은 여기서 소개하지 못한 로우 조작, 이벤트, 플러그인 등 다른 기능들도 매우 많습니다. 캡쳐만으로는 전달할 수 없었지만, 대용량 데이터를 로드할 때 속도가 매우 빠르며 스크롤이 부드럽다는 특징도 있습니다. 혹시나 더욱 많은 샘플과 예제 코드를 확인하고 싶으신 분들은 아래 관련 사이트 목록에 있는 사이트를 방문해주시길 바랍니다. ^^ 아! 구매문의는 02-784-2503으로 언제든지 해주세요. 친절하게 안내해드리겠습니다.
 
 
 
웹포넌트 관련 사이트 목록
 
 사이트명 설명
 웹포넌트 공식 사이트  웹포넌트 공식 사이트로 제품에 대한 상세 설명 보기, 트라이얼 다운로드가 가능합니다.
 웹포넌트 퍼블리셔  웹포넌트 차트, 그리드에 관련한 예제 코드를 보거나 편집할 수 있습니다.
 기술지원 사이트  제품에 대한 질문을 게시할 수 있으며, 구매하신 고객의 경우 제품문의를 할 수 있습니다. FAQ, 버전 이력, 공지사항을 확인할 수 있습니다.
 
 웹포넌트 샘플 사이트   웹포넌트 차트, 그리드에 관련한 예제를 확인할 수 있습니다.