버추얼 스크롤링 사용하기

그리드에서 데이터가 많아질 경우에는 DOM 렌더링 엔진의 문제로 사용자 인터렉션이 느려지는 문제가 발생합니다.
Chrome 및 Firefox, Edge 등의 모던 브라우저에서 문제의 심각성이 덜하지만, Internet Explorer 에서는 문제의 심각성이 큰편이므로
버추얼 스크롤링 기법을 활용한 데이터의 출력 속도 향상에 대한 샘플을 제공해드립니다.

※ 버추얼 스크롤링의 작동방식은 그리드에 출력할 데이터 중에 현재 그리드상에 보이는 부분을 기준으로 지정한 건수 만 DOM 요소를 생성하여 보여주고
보이지 않는 영역의 DOM 요소들은 제거하여 렌더링 엔진의 처리할 대상을 줄여주는 방식을 사용합니다.

※ 이 샘플은 순수 조회성 데이터 그리드에서만 활용하시는 것을 권장하며,
데이터의 수정이나 체크박스를 통한 선택 및 행 번호 출력등의 기능에서 문제가 발생할 수 있으니 잘 고려한 후에 사용해 주시길 바랍니다.

전체 데이터를 로컬에 한 번에 받아 버추얼 스크롤링 적용

이 예제는 서버로 부터 dews.ajax 를 이용하여 전체 데이터를 가져오고, 그 데이터를 버추얼 스크롤링이 가능한 형태의 dews.dataSource 로 생성하여 사용하는 방식입니다.

dews.ui.dataSource 의 옵션

data array 서버에서 가져온 전체 데이터
pageSize number 페이징시 한 화면에 출력할 항목의 갯수

dews.ui.grid 의 옵션

scrollable.virtual boolean 버추얼 스크롤링을 사용하도록 설정합니다.(true)로 설정
rowNo boolean 번호 출력 기능을 사용하지 않도록 설정해주세요.(false)로 설정
editable boolean 데이터의 수정기능은 사용하지 않습니다.(false)로 설정
columns 컬럼의 정의 부분에서 전체 선택을 위한 체크박스 등을 추가하지 마세요.

서버에서 데이터를 페이징하여 버추얼 스크롤링 적용

이 예제는 서버 프레임워크의 데이터 API 가 페이징을 지원할 경우에 dews.ui.dataSource에 페이징 기능을 직접 설정하여 사용하는 방식입니다.

※ 현재는 지원되지 않는 방식이므로 별도 공지가 있을때 까지는 사용하지 말아주세요.

dews.ui.dataSource 의 옵션

serverPaging boolean 서버 페이징을 사용할지 여부입니다. (true)로 설정
pageSize number 페이징시 한 화면에 출력할 항목의 갯수
schema.total string 서버에서 전체 항목의 갯수를 반환하는 필드의 이름입니다.

dews.ui.grid 의 옵션

scrollable.virtual boolean 버추얼 스크롤링을 사용하도록 설정합니다.(true)로 설정
rowNo boolean 번호 출력 기능을 사용하지 않도록 설정해주세요.(false)로 설정
editable boolean 데이터의 수정기능은 사용하지 않습니다.(false)로 설정
columns 컬럼의 정의 부분에서 전체 선택을 위한 체크박스 등을 추가하지 마세요.