RealGrid WEB Data Grid Component

RealGrid 컴포넌트 사용을 위한 기본 개념과 개발 절차에 대해서 설명 합니다.

RealGrid 기본 개념

RealGrid Architecture를 설명합니다.

RealGrid Architecture

RealGrid의 GridView와 TreeView가 화면에 표시하는 데이터는 각각 LocalDataProvider와 TreeDataProvider가 제공합니다. DataProvider의 데이터셋은 RDB의 Table과 유사하게 고유한 자료형을 갖는 하나 이상의 DataField와 하나 이상의 데이터행들로 구성됩니다. 그리드나 트리의 컬럼은 Data Provider의 DataField에 연결되고, 각각의 아이템들은 연결된 데이터행의 값을 표시합니다. 두 Data Provider는 loadData 함수로 서버에서 내려받은 데이터셋이나, setRows 등의 Javascript를 통해 추가된 데이터셋을 로컬 메모리에 저장하고 관리합니다. 실행 시간에 사용자가 편집 등을 통해 그리드나 트리에 입력한 데이터 또한 그리드나 트리에 연결된 Data Provider에 저장됩니다. 어떤 경로든 Data Provider에 수정/추가/삭제 등의 변화가 생기면, 이 Data Provider에 연결된 그리드나 트리뷰에 이벤트가 전달되고 지정된 콜백 함수가 호출됩니다.

Item Model

RealGrid는 데이터 모델과 화면 표시를 위한 View 모델 혹은, Item 모델을 별도로 관리합니다. 한 Item은 그리드뷰의 한 행을 대표하고 그 행에 대한 참조 데이터 및 상태를 관리합니다. 각 Item은 DataProvider의 한 행일 수도 있고, Row Grouping된 그리드의 그룹 Header나 Footer가 될 수도 있습니다. 즉, 그리드뷰는 Data모델이 아니라 Item 모델을 화면에 표시하는 것입니다. 수정/추가/삭제 등 편집 역시 Item 모델 수준에서 처리되고, 편집을 완료(commit)하는 시점에 변경 내용을 DataProvider에 전달합니다.

DataProvider의 각 행이 row index를 갖는 것처럼, Item 모델의 각 Item도 index를 갖습니다. Item의 인덱스는 항상 화면에 표시되는 순서와 같습니다. 정렬(sorting)이나 필터링, Row Grouping을 하면 Data 행들의 순서와 틀어지게 되고, 아이템의 수 item count와 데이터 행의 수 row count 도 달라지게 됩니다.

// item number

var itemCount = grid.itemCount();

// row number

var rowCount = dataProvider.getRowCount();

그리드와 관련된 메쏘드나 이벤트의 매개변수들은 대개 Item 인덱스를 기준으로 합니다. DataProvider와 관련된 메쏘드나 이벤트의 것들은 Data 행의 인덱스를 기준으로 합니다. 또, Item이 데이터 행을 참조하는 것이라면 연결된 데이터 행의 인덱스를 알 수 있습니다.

// item index로 data row index 가져오기

var row = grid.getRowId(itemIndex);

 

댓글

댓글 본문