Js表格，萬條資料瞬間載入
在Ajax動態載入資料的實際應用中，大家都習慣了一種思考方式：一條資料建立一行。
所以如果數量大的時候，一次性要載入完資料的話，瀏覽器就會卡上半天
受Flex的DataGrid控制項的啟發，在Flex的DataGrid控制項中，展示資料的方法並不是有多少條資料就創建多少行，它最多只創建你在介面上所看到的十幾二十行（假設為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 in options) {
for (var attr in options) {
for (var attr in options) {
for (var attr in options) {
for (var attr in options) {
for (var attr in options) {
for (var attr in options) {
for (var attr in options) {
for (var attr in options) { this.options[attr] = options[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 = parseInt(top / this.options.itemSize);
return pos;
}
//每頁可展示的資料數量
function getPageItems() {
return this.options.size / this.options.itemSize;
}
//滾動事件回應
function OnScroll(_this) {
var pos = _this.getPos(); >if (pos == _this.options.pos)
return;
_this.options.pos = pos;
_this.onScroll(pos);
}
//捲軸建立
function CreateAt(dom) {
var _this = this;
var bar = document.createElement("div");
var content = document.createElement("div");
bar.appendChild(content);
bar.style.width = "19px";
bar.style.overflowY = "scroll";
bar.style.overflowX = "hidden";
if (bar.attachEvent) {
bar.attachEvent("onscroll", function () {
OnScroll(_this);
});
} else {
//firefox相容
bar.addEventListener("scroll", function () {
OnScroll(_this);
}, false);
}
content.style.backgroundColor = "white";
content .style.width = "1px";
this.bar = bar;
this.content = content;
if (typeof(dom) == "string") {
dom = document. getElementById(dom);
}
dom.innerHTML = "";
dom.appendChild(this.bar);
this.created = true;
Refresh(this);
this.created = true;
Refresh(this);
this.created = true;
Refresh(this);
return { setOptions : setOptions, CreateAt : CreateAt, getPos : getPos, getPageItems : getPageItems, }; })(); 頁面代碼： 複製代碼 程式碼如下:
