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 相关文章推荐
一些有关检查数据的JS代码
Sep 07 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
返回上一页并自动刷新的JavaScript代码
Feb 19 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
javascript 实现动态侧边栏实例详解
Nov 11 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
javascript获取select值的方法完整实例
Jun 20 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
笑谈配置,使用Smarty技术
2007/01/04 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
理解JS事件循环
2016/01/07 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
python创建n行m列数组示例
2019/12/02 Python
python实现猜拳游戏
2020/03/04 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
python属于解释型语言么
2020/06/15 Python
Python接口自动化测试的实现
2020/08/28 Python
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
社会实践活动总结报告
2014/04/29 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
幼师个人总结范文
2015/02/28 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
防止web项目中的SQL注入
2021/12/06 MySQL