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 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
javascript 函数式编程
Aug 16 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
jQuery对象[0]是什么含义?
Jul 31 Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
JS变量及其作用域
Mar 29 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 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 危险函数解释 分析
2009/04/22 PHP
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
php 生成文字png图片的代码
2011/04/17 PHP
将php数组输出html表格的方法
2014/02/24 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
js微信分享实现代码
2020/10/11 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
解读! Python在人工智能中的作用
2017/11/14 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
软件测试工程师笔试题带答案
2015/03/27 面试题
国家助学金获奖感言
2014/01/31 职场文书
大学生党员承诺书
2014/05/20 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
Django rest framework如何自定义用户表
2021/06/09 Python