[웹포넌트 그리드]
일반 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 코드>
-
<table id="grid-table-1">
-
-
</table>
-
-
<script id="grid-template-1" type="text/template">
-
<table width="100%" height="350px">
-
<thead>
-
<tr>
-
</tr>
-
</thead>
-
<tbody>
-
<tr>
-
</tr>
-
</tbody>
-
</table>
-
</script>
<script 코드>
-
var table1 = $('#grid-table-1');
-
var template1 = $('#grid-template-1');
-
var grid = webponent.grid.init(table1, template1);
-
$.ajax({
-
dataType : 'json',
-
url : 'testData.json',
-
success : function (resp) {
-
grid.appendRow(resp);
-
}
-
});
컬럼과 컬럼 사이 테두리에 마우스를 올려놓으면 크기를 조절할 수 있습니다. 이 기능은 셀에 정보가 매우 길어서 보이지 않는 경우에 유용하게 사용할 수 있습니다.
-
grid.setFixedColumn(index);
2-3.숨기기
생성된 그리드에서 숨기고 싶은 컬럼은 setColumnVisibility() 함수를 통해 표시 여부를 설정할 수 있습니다. 다음은 그리드의 함수를 사용해서 특정 컬럼을 보이게 하는 함수와 숨기는 함수를 작성한 예제 코드 입니다.
-
var columnNames = grid1.getColumnNames();
-
-
function hideColumn () {
-
var index = 1;
-
grid1.setColumnVisibility(columnNames[index], false);
-
}
-
-
function showColumn () {
-
var index = 1;
-
grid1.setColumnVisibility(columnNames[index], true);
-
}
-
2-4.이동
-
var columnNames = grid1.getColumnNames();
-
-
function swapColumn () {
-
-
var index1 = parseInt($('#column-index-1').val()) - 1;
-
var index2 = parseInt($('#column-index-2').val()) - 1;
-
grid1.swapColumn(columnNames[index1], columnNames[index2]);
-
}
특정 컬럼의 값들로 정렬 시키는 기능입니다. 컬럼명 옆에 있는 작은 화살표를 누르면 그 컬럼의 값들로 재정렬됩니다. 만약 정렬을 원치 않는 컬럼일 경우에는 기본 테이블 마크업에 'sortable="false"' 속성을 주면 그 컬럼에는 정렬 화살표가 생기지 않습니다.
2-6.필터링
-
var columnNames = grid1.getColumnNames();
-
var index = 0;
-
var key = '파';
-
grid1.filterColumn(columnNames[index], key);
사이트명 | 설명 | |||
웹포넌트 공식 사이트 | 웹포넌트 공식 사이트로 제품에 대한 상세 설명 보기, 트라이얼 다운로드가 가능합니다. | |||
웹포넌트 퍼블리셔 | 웹포넌트 차트, 그리드에 관련한 예제 코드를 보거나 편집할 수 있습니다. | |||
기술지원 사이트 | 제품에 대한 질문을 게시할 수 있으며, 구매하신 고객의 경우 제품문의를 할 수 있습니다. FAQ, 버전 이력, 공지사항을 확인할 수 있습니다. |
|||
웹포넌트 샘플 사이트 | 웹포넌트 차트, 그리드에 관련한 예제를 확인할 수 있습니다. |
'CyberI 제품소개 > UI컴포넌트' 카테고리의 다른 글
[웹포넌트 가상키보드] 웹 사이트를 안전하게 만드는 가장 손쉬운 방법 (0) | 2016.01.23 |
---|---|
PhantomJS로 GRID&CHART를 PDF 출력하기 (4편 : Event Listners) (0) | 2016.01.06 |
PhantomJS로 GRID&CHART를 PDF 출력하기 (3편 : Header & Footer에 이미지 넣기) (0) | 2015.08.22 |
PhantomJS로 GRID&CHART를 PDF 출력하기 (2편 : 페이지설정, Header & Footer ) (0) | 2015.07.24 |
PhantomJS로 GRID&CHART를 PDF 출력하기 (1편 : 시작하기) (0) | 2015.06.25 |