SMART datagrid v1.4 > Examples

Back  Forward

Lazy Data Loading  Example

1. 마지막 행까지 스크롤되면 다음 데이터 로드하기

사용자가 마우스나 키보드로 그리드의 마지막 행이 표시되도록 스크롤하면 GridBase.onScrollToBottom 이벤트가 발생한다. 이 이벤트 핸들러에서 데이터행들을 로드해서 데이터셋에 추가할 수 있다. 

Grid - 1
rows

1.4.5버전 부터 actionByUser파라미터를 사용할수 있다. 

actionByUser 파라미터를 이용하여 사용자에 의해 발생했는지 정렬,포커스이동 등 api에 의해 이동됬는지 구분할수 있다. 

Code -1
    grid.onScrollToBottom = function (grid, actionByUser) {
        if(actionByUser){
            $.ajax({
                url: "/data/orders.json",
                success: function (data) {
                    DataLudi.loadJsonData(ds, data, {
                        fillMode: "append"
                    });
                },
                ...
            });
        }
    }
2. 시간 간격을 두고 로드하기

로드해야할 전체 행 수를 미리 아는 경우라면, GridDataSet.setRowCount를 호출해서 데이터셋의 행 수를 미리 지정할 수 있다. 데이터셋의 각 행은 실제 값이 들어있지 않는 상태로 자리만 차지하고 있지만, 그리드에는 실제 행으로 추가되어 표시된다. 

데이터셋의 hasData 메소드로 특정 행이 실제로 데이터를 가지고 있는 지를 알 수 있다. 

아래 예제에서는 전체 행수를 10,000으로 미리 설정하고, 1초 간격마다 1000 행 씩을 로드해서 해당하는 위치에 update하고 있다. 

 

Grid - 2
rows

소스보기 JSP 

See Also
GridBase.onScrollToBottom
GridDataSet.setRowCount
DataSet.hasData
loadJsonData
DataLoader.load
GridDataSet
GridView
Examples
Load CSV Data
Load Json Data
Load XML Data