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


Posted in Javascript onFebruary 20, 2014

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, 
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"> 
<head> 
<title> 
表格控件 
</title> 
<script src="Scrollbar.js" type="text/javascript"> 
</script> 
<script language="javascript" type="text/javascript"> 
var data = []; 
//创建一万条示例数据 
for (var i = 0; i < 10000; i++) { 
var row = { 
id: i, 
text: "text" + i 
}; 
data.push(row); 
} 
//创建滚动条 
var scrbar = new Scrollbar(); 
window.onload = function() { 
scrbar.CreateAt("divScroll"); 
scrbar.setOptions({ 
total: 10000, 
size: 300 
}); 
scrbar.onScroll = function(pos) { 
ShowData(pos); 
} 
//获取模板 
var items = 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()); 
} 
//根据滚动条,展示数据 
function ShowData(pos) { 
var n = scrbar.getPageItems(); 
var rows = document.getElementById("tblList").rows; 
for (var i = 0; i < n; i++) { 
var row = rows[i]; 
var item = data[i + pos]; 
row.cells["tdID"].innerHTML = item["id"]; 
row.cells["tdText"].innerHTML = item["text"]; 
} 
} 
</script> 
</head> 
<body> 
<div id="divScroll" style="float:right"> 
</div> 
<table border="1"> 
<!--行标题--> 
<thead> 
<tr> 
<th> 
ID 
</th> 
<th> 
Text 
</th> 
</tr> 
</thead> 
<!--数据展示区--> 
<tbody id="tblList"> 
<tr id="trTpl"> 
<td id="tdID"> 
</td> 
<td id="tdText"> 
</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html>
Javascript 相关文章推荐
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
Jan 22 Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
javascript中函数作为参数调用的方法
Feb 09 Javascript
浅析javascript中的DOM
Mar 01 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
js仿微信抢红包功能
Sep 25 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 #Javascript
js获取指定的cookie的具体实现
Feb 20 #Javascript
js获取和设置属性的方法
Feb 20 #Javascript
js控制浏览器全屏示例代码
Feb 20 #Javascript
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 #Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
Feb 20 #Javascript
JS中数组Array的用法示例介绍
Feb 20 #Javascript
You might like
PHP实现时间轴函数代码
2011/10/08 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
netbeans7安装python插件的方法图解
2013/12/24 Python
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
用python实现面向对像的ASP程序实例
2014/11/10 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
使用python 3实现发送邮件功能
2018/06/15 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
党校自我鉴定范文
2013/10/02 职场文书
初中生自我评价
2014/02/01 职场文书
保安岗位职责
2014/02/21 职场文书
毕业自我鉴定书
2014/03/24 职场文书
技术入股合作协议书
2014/10/07 职场文书
2014年网管工作总结
2014/12/11 职场文书
建国大业观后感
2015/06/01 职场文书
环保主题班会教案
2015/08/13 职场文书
学校教代会开幕词
2016/03/04 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫