Js表格万条数据一下子加载实现代码

发布时间：2023-10-18 15:20:53 所属栏目：教程来源：

导读：Js表格，万条数据瞬间加载

在Ajax动态加载数据的实际应用中，大家都习惯了一种思维方式：一条数据创建一行。

于是如果数量大的时候，一次性要加载完数据的话，浏览器就会卡上半天

受Flex的DataGrid控件的

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) {

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);

}

return {

setOptions : setOptions,

CreateAt : CreateAt,

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!