SMART datagrid v1.4 > Concepts
SMART datagrid는 그리드에 연결된 데이터셋의 일부분을 표시하는 방식으로 일반적인 웹 어플리케이션의 페이징 기능을 클라이언트 수준에서 구현한다. 물론 동작 방식에 따라 대응하는 서버 로직이 구현 가능해야 한다. 그리드 쪽 구현 방식은 데이터를 로드하는 시점이나 실제 로드하는 데이터 양에 따라 조금씩 달라진다. TreeView는 현재 페이징을 지원하지 않는다.
페이징에서 설정하는 전체 페이지 개수 및 페이지 수와 페이지 크기로 결정되는 행의 수 등은 실제 데이터셋과 일치할 필요가 없다. 또한 각 페이지에 표시되는 행들도 마찬가지다. 즉, 그리드 페이징은 결국 페이징 설정에서 지정한 논리적인 현재 페이지에 일정한 개수의 데이터행들을 표시할 뿐이다. 현재 페이지에 표시되는 행들 외에 다른 페이지별 행목록을 따로 보관하지도 않는다. 물론 실제 데이터셋의 상태와 일치시켜 구현하는 것이 일반적이다.
데이터셋에 이미 로드된 데이터를 지정한 위치부터 지정한 페이지 크기 만큼씩 표시한다.
먼저, GridView.setPaging으로 한 페이지의 크기와 페이지 개수를 지정한다. pageCount를 지정하지 않거나 0보다 작은 값으로 지정하면 그리드에 표시될 데이터행들의 개수와 setPaging이나 pageSize로 지정한 페이지 크기에 맞게 전체 페이지 개수가 자동으로 계산된다. 이 후, pageIndex를 변경할 때마다 페이지 위치에 맞는 해당 데이터행들을 그리드에 표시한다.
전체 행 개수나 페이지 수를 예측할 수 있지만, 전체 데이터를 미리 로드할 필요가 없을 때 구현 가능한 방식이다. 행 수를 알 수 있다면, 데이터셋의 rowCount를 지정해서 페이지 개수가 자동 계산되도록 하고, 아니면 예상 되는 전체 페이지 개수를 setPaging이나 필요 시점마다 setPageCount를 호출해서 지정해야 한다. 지정된 페이지 수보다 큰 값으로 pageIndex를 지정할 수 없기 때문이다.
pageIndex를 변경할 때, 혹은 onPageIndexChanged 이벤트 내에서 페이지 위치에 해당하는 데이터가 데이터셋에 아직 로드되지 않은 상태라면 해당 위치의 데이터행들을 서버로부터 다시 로드해서 데이터셋에 채운다. 클라이언트에 데이터가 이미 존재한다면 GridDataSet.updateRows 등을 사용한다.
특정 행의 데이터가 로드됐는 지 여부는 DataSet.hasData 메소드로 알 수 있다.
$('#incPage').click(function () {
var oldPage = grid.pagIndex();
var newPage = oldPage + 1;
grid.setPageIndex(newPage);
if (newPage != oldPage) {
var row = grid.getRow(newPage * grid.pageSize());
if (row && !dataset.hasData(row.dataIndex()) {
// 데이터를 로드한다.
$.ajax({
url: "/data/path/orders.csv",
dataType: 'text',
success: function (data) {
DataLudi.loadCsvData(dataset, data, {
count: pageSize,
fillMode: 'update',
fillPos: pageIndex * pageSize
});
}
};
// data가 이미 존재한다면,
dataset.updateRows(pageIndex * pageSize, rows, 0, pageSize);
}
}
});
그리드 페이징을 구현하기 위해서, 데이터셋과 페이지 위치가 반드시 정확하게 대응될 필요는 없다. 예를 들어, 한 페이지 크기 만큼의 데이터만 데이타셋이 보관하고, 페이지 위치가 변경될 때마다 데이터를 새로 로드할 수도 있다. 또는, 페이지 위치에 따라 특정한 행들을 표시할 수도 있다.
우선 이런 방식으로 페이징을 구현하기 위해서는 위 경우와 마찬가지로 먼저 pageCount를 지정해야 한다. 그리고, pageOffset이나 setPageAndOffset을 이용해서 현재 페이지에 표시할 행의 위치를 정상적인 페이지 행 위치와 다르게 지정할 수 있다.
$('#incpage').click(function (ev) {
// 항상 첫 번째 행부터 표시한다.
var newPage = grid.pageIndex() + 1;
var size = grid.pageSize();
grid.setPageOffset(-newPage * size);
grid.setPageIndex(newPage);
// 페이지 위치의 데이터를 다시 로드한다.
loadData(newPage * size);
});
현재 페이지에 표시될 데이터행들을 명시적으로 지정할 수도 있다. 즉, 페이징 설정에 따라 자동으로 결정되는 데이터행들 대신, pageRows나 setPageAndRows를 호출해서 특정 행들이 표시되도록 할 수 있다. 페이지 위치를 지정하거나 onPageIndexChanged 이벤트 내에서 호출하면 된다.
grid.onPageIndexChanged = function (grid, oldPage, newPage) {
grid.setPageRows([0, 1, 2, 3, 4, 5]);
});
그리드는 기본적으로 현재 페이지에 표시되는 행들을 기준으로 정렬과 필터링을 실행한다. 하지만, GridBase.operateOptions의 pageSorting과 pageFiltering을 각각 false로 지정하면 전체 행들을 대상으로 하는 정렬과 필터링이 실행된다.
전체 행을 기준으로 정렬이나 필터링을 하는 경우 위에서 설명한 늦게 로딩하는 방식이나, 위치를 지정하는 방식을 구현하는 것이 복잡해 질 수 있다.