Js 테이블 수만 개의 데이터 즉시 로딩 구현 code

Js 형식에서는 수만 개의 데이터가 즉시 로드됩니다.

동적으로 데이터를 로드하는 Ajax의 실제 응용 프로그램에서는 모든 사람이 하나의 데이터가 하나의 행을 생성한다는 사고 방식에 익숙합니다.
따라서 데이터의 양이 많아 한 번에 로드해야 하는 경우 브라우저가 오랫동안 작동하지 않게 됩니다.

Flex DataGrid 컨트롤에서 영감을 받아 Flex DataGrid 컨트롤에서는 데이터를 표시하는 방법은 데이터 조각만큼 많이 생성되지 않으며 인터페이스에 표시되는 최대 12개 또는 20개 행(n개 행으로 가정)만 생성됩니다. 많은 양의 데이터가 있으면 스크롤 프로세스 중에 데이터에서 추출됩니다. 표시되어야 하는 n 행의 데이터가 생성된 n 행의 컨트롤에 다시 표시됩니다.
즉, Flex의 DataGrid 컨트롤에서 우리가 실제로 보는 것은 n개의 컨트롤 행뿐이지만 표시되는 데이터는 스크롤 막대의 상태에 따라 필터링됩니다.

그래서 JS에서도 비슷한 방법을 사용하면 수만 개의 데이터가 있어도 수십 개의 Dom만 생성하면 자연히 효율성이 훨씬 빨라집니다.
더 이상 고민하지 말고 코드를 살펴보겠습니다. 먼저 스크롤 막대가 필요합니다
Scrollbar.js

코드 복사 코드는 다음과 같습니다.

 
 function Scrollbar() { 
this.options = { 
total : 0, //총 데이터 개수
pos : 0, //현재 스크롤 위치
itemSize : 20, / /단일 항목 크기
 size : 200 //제어 크기 
} 
} 
Scrollbar.prototype = (function () { 
function setOptions(options) { 
for (var 옵션의 attr) { 
this.options[attr] = 옵션[attr] 
} 
Refresh(this) 
} 
function Refresh(_this) { 
if ( !_this.created) 
return; //컨트롤 높이 설정
_this.bar.style.height = _this.options.size "px" 
//콘텐츠 높이 설정
var ch = _this.options.total * _this.options.itemSize; 
_this.content.style.height = ch "px"; 
} 
//스크롤 위치 가져오기
function getPos() 
var top = this.bar.scrollTop; 
var pos = parsInt(top / this.options.itemSize); 
return pos; 각 페이지에 표시됩니다
function getPageItems() { 
return this.options.size / this.options.itemSize; 
} 
//Scroll 이벤트 응답
function OnScroll(_this) { 
var pos = _this.getPos(); 
if (pos == _this.options.pos) 
return; 
_this.options.pos = pos; ); 
} 
//스크롤바 생성 
function CreateAt(dom) { 
var _this = this; var bar = document.createElement("div"); content = document.createElement("div"); 
 bar.appendChild(content); 
bar.style.width = "19px"; 
bar.style.overflowY = "scroll"; bar.style.overflowX = "숨김"; 
if (bar.attachEvent) { 
bar.attachEvent("onscroll", function () { 
OnScroll(_this); 
}); 🎜>} else { 
//firefox 호환
bar.addEventListener("scroll", function () { 
OnScroll(_this); 
}, false) 
} 
 content.style.groundColor = "white"; 
content .style.width = "1px"; 
this.bar = bar 
this.content 
if (typeof(dom) == "string") { 
dom = document.getElementById(dom); 
dom.innerHTML = ""; 
this. Created = true; 
Refresh(this); 
} 
return { 
setOptions: setOptions, 
CreateAt: CreateAt, 
getPos: getPos, 
getPageItems, 
onScroll : null 
//스크롤 막대 이벤트 시뮬레이션 
})() 

 
페이지 코드: 




코드 복사


코드는 다음과 같습니다.

테이블 제어
< ;/title>

;body> ;

-- 행 헤더 -->

ID

텍스트

<--데이터 표시 영역-->

🎜>

Js 테이블 수만 개의 데이터 즉시 로딩 구현 code_javascript 기술