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选择器 $实现原理
Dec 02 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
JS中如何设置readOnly的值
Dec 25 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
Vue渲染函数详解
Sep 15 Javascript
vue.js,ajax渲染页面的实例
Feb 11 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
Javascript设计模式之原型模式详细
Oct 05 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
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
帝国cms常用标签汇总
2015/07/06 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
javascript中创建对象的三种常用方法
2010/12/30 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
python实现图片批量剪切示例
2014/03/25 Python
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
浅析使用Python操作文件
2017/07/31 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
飞利浦法国官网:Philips法国
2019/07/10 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
服装厂厂长职责
2013/12/16 职场文书
环保倡议书100字
2014/05/15 职场文书
竞赛口号大全
2014/06/16 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
十七岁的单车观后感
2015/06/12 职场文书
Nginx 匹配方式
2022/05/15 Servers