그리드 Lazy Loading 구현
그리드에서 Lazy Loading은 맨 마지막 행까지 스크롤 되었을때 그 다음 데이터를 읽어 오는 방식으로 구현 할 수 있습니다. RealGrid에서 이런 동작을 구현 할 수 있도록 스크롤 관련 콜백 함수를 제공하고 있습니다.
그리드의 맨 마지막 행까지 스크롤될 때 호출되는 GridBase.onScrollToBottom() 콜백 함수를 이용해 Lazy Loading을 구현 할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function loadNext() {
var newStart = dataProvider.getRowCount();
$.ajax({
url: "/resource/data/carData2.json",
success: function(data) {
dataProvider.fillJsonData(data,
{fillMode: "append", start: newStart, count: 100});
}
});
}
gridView.onScrollToBottom = function() {
loadNext();
}
그리드에는 스크롤을 감지 할 수 있는 또 다른 이벤트가 있습니다. GridBase.onTopItemIndexChanged()함수는 그리드가 세로방향으로 스크롤될대 호출되는 콜백함수이며 그리드의 최 상단 ItemIndex를 인자로 들려줍니다.
이 함수를 이용해 50개 행이 스크롤될때 마다 다음 데이터를 미리 읽어 오도록 구현해 보겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function loadNext() {
var newStart = dataProvider.getRowCount();
$.ajax({
url: "/resource/data/carData2.json",
success: function(data) {
dataProvider.fillJsonData(data,
{fillMode: "append", start: newStart, count: 100});
}
});
}
var scrollItem = 0;
gridView.onTopItemIndexChanged = function(grid, item) {
if (item > scrollItem) {
scrollItem += 50;
loadNext();
}
}