JS 테이블, 수만 개의 데이터가 즉시로드됩니다.
AJAX의 실제 적용을 동적으로로드하는 데이터를 적용 할 때 모든 사람은 사고 방식에 익숙합니다 : 데이터 행을 만듭니다.
따라서 숫자가 크고 데이터를 한 번에로드 해야하는 경우 브라우저는 반나절 동안 고정됩니다.
Flex의 DataGrid Control에서 영감을 얻은 Flex의 DataGrid Control에서 데이터를 표시하는 방법은 많은 행만큼 많은 행을 생성하는 것이 아니라 인터페이스에서 볼 수있는 최대 12 개 또는 20 개의 행만 생성합니다 (또한 있다고 가정하면 많은 데이터, 당신이 볼 수있는 n 데이터 행은 스크롤링 프로세스 중에 데이터에서 추출되며 생성 된 N ROW 컨트롤에서 다시 시행됩니다.
다시 말해, Flex Datagrid 컨트롤에서는 실제로 N- 라인 컨트롤 만 볼 수 있지만 스크롤 막대 상태에 따라 표시되는 데이터가 필터링됩니다.
따라서 유사한 방법을 사용하여 JS에서 구현되면 수만 개의 데이터가 있으며, 수십 개의 DOM 생성물 일 수 있으며, 이는 자연스럽게 훨씬 빠릅니다.
더 이상 고민하지 않고 코드를 추가하십시오. 먼저 스크롤 막대가 필요합니다
scrollbar.js
코드 사본은 다음과 같습니다.
함수 스크롤 바 () {
this.options = {
총 : 0, // 총 데이터 수
POS : 0, // 현재 스크롤 위치
항목 : 20, // 단일 크기
크기 : 200 // 제어 크기
};
}
scrollbar.prototype = (function () {
함수 세트 오프 (옵션) {
for (옵션의 var attr) {
this.options [attr] = 옵션 [attr];
}
새로 고침 (this);
}
기능 새로 고침 (_this) {
if (! _this.created)
반환; // 제어 높이를 설정합니다
_this.bar.style.height = _this.options.size + "px";
// 컨텐츠 높이를 설정합니다
var ch = _this.options.total * _this.options.itemsize;
_this.content.style.height = ch + "px";
}
// 스크롤 위치를 얻습니다
함수 getpos () {
var top = this.bar.scrolltop;
var pos = parseint (top / this.options.itemsize);
POS 리턴;
}
// 페이지 당 표시 할 수있는 데이터 수
함수 getPageItems () {
이 this.options.size / this.Options.ITEMSIZE를 반환하십시오.
}
// 이벤트 응답을 스크롤합니다
함수 onscroll (_this) {
var pos = _this.getpos ();
if (pos == _this.options.pos)
반품;
_this.options.pos = pos;
_this.onscroll (pos);
}
// 스크롤 바 생성
기능 createat (dom) {
var _this = this;
var bar = document.createelement ( "div");
var content = document.createelement ( "div");
Bar.appendChild (콘텐츠);
bar.style.width = "19px";
bar.style.overflowy = "스크롤";
bar.style.overflowx = "숨겨진";
if (bar.attachevent) {
bar.attachevent ( "onscroll", function () {
onscroll (_this);
});
} 또 다른 {
// Firefox 호환
bar.addeventListener ( "스크롤", function () {
onscroll (_this);
}, 거짓);
}
content.style.backgroundColor = "화이트";
content.style.width = "1px";
this.bar = bar;
this.content = 내용;
if (typeof (dom) == "String") {
dom = document.getElementById (dom);
}
dom.innerhtml = "";
Dom.appendChild (this.bar);
this.created = true;
새로 고침 (this);
}
반품 {
셋톱 : 세트 옵션,
createat : createat,
getpos : getpos,
getPageItems : getPageItems,
onscroll : null
// 스크롤바 이벤트를 시뮬레이션합니다
};
}) ();
페이지 코드 :
코드 사본은 다음과 같습니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<title>
테이블 컨트롤
</제목>
<script src = "scrollbar.js"type = "text/javaScript">
</스크립트>
<script language = "javaScript"type = "text/javaScript">
var data = [];
// 만 샘플 데이터를 만듭니다
for (var i = 0; i <10000; i ++) {
var row = {
ID : 나,
텍스트 : "텍스트" + i
};
data.push (행);
}
// 스크롤 바 생성
var scrbar = 새로운 스크롤 바 ();
Window.onload = function () {
scrbar.createat ( "divscroll");
scrbar.setOptions ({
총 : 10000,
크기 : 300
});
scrbar.onscroll = function (pos) {
showdata (pos);
}
// 템플릿을 가져옵니다
var 항목 = scrbar.getPageItems ();
var tpl = document.getElementById ( "trtpl");
tpl.parentnode.removechild (tpl);
// 보는 수십 행의 테이블 만 생성하므로 자연스럽게 훨씬 빠릅니다.
var list = document.getElementById ( "tbllist");
for (var i = 0; i <data.length && i <Items; i ++) {
var nr = tpl.clonenode (true);
// 템플릿 라인에서 새 줄을 복사합니다
List.appendChild (NR);
}
showdata (scrbar.getpos ());
}
// 스크롤 막대에 따라 데이터를 표시합니다
함수 showdata (pos) {
var n = scrbar.getPageItems ();
var rows = document.getElementById ( "tbllist"). 행;
for (var i = 0; i <n; i ++) {
var row = 행 [i];
var 항목 = 데이터 [i + pos];
row.cells [ "tdid"]. innerhtml = 항목 [ "id"];
row.cells [ "tdtext"]. innerHtml = 항목 [ "text"];
}
}
</스크립트>
</head>
<body>
<div id = "divscroll"style = "float : right">
</div>
<테이블>
<!-라인 제목->
<헤드>
<tr>
<th>
ID
</th>
<th>
텍스트
</th>
</tr>
</head>
<!-데이터 디스플레이 영역->
<tbody id = "tbllist">
<tr id = "trtpl">
<td id = "tdid">
</td>
<td id = "tdtext">
</td>
</tr>
</tbody>
</테이블>
</body>
</html>