Js表格万条数据瞬间加载实现代码
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>
相关推荐
-
js动态添加表格数据使用insertRow和insertCell实现
效果图: 代码: js动态添加表格数据_2.html 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js动态添加表格数据_2
-
纯js写的分页表格数据为json串
什么也不说了,直接上代码: 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags" %> <% String path = request.getContextPath(); String ba
-
js表格排序实例分析（支持int,float,date,string四种数据类型）
本文实例讲述了js表格排序的方法.分享给大家供大家参考.具体如下: <html> <head> <title>SortTable2</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> var k=0; /**//*
-
JS实现两表格里数据来回转移的方法
本文实例讲述了JS实现两表格里数据来回转移的方法.分享给大家供大家参考.具体分析如下: 最近做项目里用到了一个 两个表格里数据的来回转移,用JS稍微做了下,界面也没有去弄很漂亮 感觉写得有点繁琐了,有时间再改进哈 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml
-
JS实现表格数据各种搜索功能的方法
本文实例讲述了JS实现表格数据各种搜索功能.可忽略大小写,模糊搜索,多关键搜索.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onl
-
JS小功能(操作Table--动态添加删除表格及数据)实现代码
效果: 代码: 复制代码 代码如下: <head runat="server"> <title></title> <style type="text/css"> tr { height: 30px; } </style> <script type="text/javascript">
-
查询绑定数据岛的表格中的文本并修改显示方式的js代码
复制代码 代码如下: <script language="JavaScript"> function findAll(s){ if(s.length==0){ alert("请输入查询关键字"); } s=encode(s); var TDs=document.all.DataT1.all.tags("TD"); var num=0; for(var i=0;i<TDs.length;i++){ var tdObj=TDs[i]
-
Js表格万条数据瞬间加载实现代码
Js表格,万条数据瞬间加载 在Ajax动态加载数据的实际应用中,大家都习惯了一种思维方式:一条数据创建一行. 于是如果数量大的时候,一次性要加载完数据的话,浏览器就会卡上半天 受Flex的DataGrid控件的启发,在Flex的DataGrid控件中,展示数据的方法并不是有多少条数据就创建多少行,它最多只创建你在界面上所看到的十几二十行(假设为n行),如果数据多的话,在滚动过程中,会从数据中抽取你应该看到的这n行数据,重新展示在已经创建好的那n行控件中. 也就是说,Flex的DataGrid控件
-
Android界面数据懒加载实现代码
大家在使用手机新闻客户端的时候就会有一个发现,大多数的新闻客户端都会把新闻分类,诸如头条.娱乐.体育.科技等等,如何实现这种界面的呢?这个实现起来其实很简单,就是在一个Fragment中实现多个ViewPage的切换,再在ViewPage的上面放一个TabLayout,关联起来就可以实现联动效果.如果大家感觉不太明了的话,以后我可以专门写一篇关于Fragment中放入多个ViewPage的博客,今天,我主要介绍的是怎样实现界面即Fragment的懒加载.那么,大家就会奇怪了既然是加载界面直接加载
-
Javascript vue.js表格分页，ajax异步加载数据
分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 效果: 代码: 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: function(index){ if(index != this.cu
-
JS实现页面数据无限加载
在手机端浏览网页时,经常使用一个功能,当我们浏览京东或者淘宝时,页面滑动到底部,我们看到数据自动加载到列表.之前并不知道这些功能是怎么实现的,于是自己在PC浏览器上模拟实现这样的功能.先看看浏览效果: 当滚动条滚动到页面底部时,提示"正在加载-". 当页面已经加载了所有数据后,滚动到页面底部会提示"数据已加载到底了": 实现数据无限加载的过程大致如下: 1.滚动条滚动到页面底部. 2.触发ajax加载,把请求返回的数据加载到列表后面. 如何判断滚动条是否滚动到页面底
-
html中通过JS获取JSON数据并加载的方法
在写内容逻辑重复性的页面时,用json数据可以显著提高编程效率,并且便于后期的数据维护.因此,在视频专题页面,需要展示多列视频数据,我选择了用json. HTML如下(只展示重点部分,需要引用JQ) <div class="container-fluid content "> <div class="container neirong"> <div class="left fl"> <div class=
-
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
本文实例讲述了js+HTML5 canvas 实现简单的加载条(进度条)功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>www.jb51.net canvas实现加载条动画</title> </head> <body> <canv
-
利用js将ajax获取到的后台数据动态加载至网页中的方法
动态生成二级菜单树: <script> jQuery(function($) { /********** 获取未处理报警信息总数 **************/ var result; $.ajax({ async:false, cache:false, url: "alarm_findPageAlarm.do",//访问后台接口取数据 // dataType : "json", type: 'POST', success: function(data)
-
JS实现页面数据懒加载
页面数据懒加载.Div移动到可视区域再去ajax加载内容. 最近有需求做页面的多个table用于加载数据,但是用户浏览页面的时候不需要一次将页面所有的东西加载出来,比如页面上3个table就占满了,用户点进去第一眼也就只能看到3个.为了防止一次加载拖慢了页面的速度,所以之后的table我们要懒加载.即该table移动到了可视区域再去异步请求加载数据. 以下为目前实现的方法: <!-- page lazyloading --> <script> $(function(){ // 设置
-
JavaScript如何一次性展示几万条数据
有一位同事跟大家说他在网上看到一道面试题:"如果后台传给前端几万条数据,前端怎么渲染到页面上?",如何回答? 于是办公室沸腾了, 同事们讨论开了, 你一言我一语说出自己的方案. 有的说直接循环遍历生成html插到页面上:有的说应该用分页来处理:还有的说这个面试官是个白痴, 哪有后台传几万条数据给前端这种情况的:我仔细思考了一下,先不论后端到底会不会白痴到传几万条数据给前端,假如真碰到这种情况,那么如果前端获取到数据以后, 直接将数据转换成html字符串,通过DOM操作插入到页面,势必导
-
Java 爬虫数据异步加载如何解决
这是 Java 爬虫系列博文的第三篇,在上一篇Java 爬虫如何爬取需要登录的网站,该怎么办? 中,我们简单的讲解了爬虫时遇到登录问题的解决办法,在这篇文章中我们一起来聊一聊爬虫时遇到数据异步加载的问题,这也是爬虫中常见的问题. 现在很多都是前后端分离项目,这会使得数据异步加载问题更加突出,所以你在爬虫时遇到这类问题不必惊讶,不必慌张.对于这类问题的解决办法总体来说有以下两种: 1.内置一个浏览器内核 内置浏览器就是在抓取的程序中,启动一个浏览器内核,使我们获取到 js 渲染后的页面,这样我们就