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!

人工智能实验室
相关文章相关文章
  • 让AI触手可及  Qualcomm携手创通联达推出全新终端侧AI开发套件

    让AI触手可及 Qualcomm携手创通联达推出全新终端侧AI开发套件

  • 长虹新款智能语音空调,告诉你空调也能玩Siri

    长虹新款智能语音空调,告诉你空调也能玩Siri

  • 第一批国家重点研发计划公布,旷视科技开启“五年行动”

    第一批国家重点研发计划公布,旷视科技开启“五年行动”

  • 品友互动为Digital Travel APAC2018 唯一受邀中国AI企业

    品友互动为Digital Travel APAC2018 唯一受邀中国AI企业

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

据外媒报道,STEER打造了首款完全自动驾驶停车技术,旨在使常规车辆转变为无人驾驶车辆。STEER的首款技术应用是4级自动驾驶及网络安全停车...

近日,美国软性机器抓手制造商 Soft Robotics 宣布,获得 2000 万美元的融资,本轮投资者包括 Scale Venture Partners,Calibrate Ventures...

据外媒报道,加州车管局发布了《2017自动驾驶脱离报告(California Autonomous Vehicle Disengagement Reports)》,其中谈及了脱离的具体...

用人机语音交互,来解决智能家居适老的问题;通过家庭门禁与安防套件、空气净化套件、可燃气体与有害气体监控套件等相互联动,在不同生活情...