js表格万条数据瞬间加载实现代码

  次阅读 作者:智能小宝 来源:互联网 2016-01-28 12:57 我要评论(0)

一条数据创建一行,如果数量大的时候,一次性要加载完数据的话,浏览器就会卡上半天,下面有个不错的方法,大家可以参考下

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

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...