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>
文章出处：http://fogandsun.blog.163.com/blog/static/36658874201029101414245/
分享到：
相关推荐
总结来说，"Js表格，万条数据瞬间加载"涉及到的技术和策略包括JavaScript的动态更新、数据分页、虚拟滚动、延迟加载、服务器端处理、数据摘要、筛选以及自定义滚动条等。这些技术的应用使得前端表格即使在处理大量...
在滚动条创建后，根据滚动条的位置动态加载数据，这就允许我们只加载需要显示的数据项，而不是全部数据。这样，即使是有成千上万条数据，也只需要创建和维护少量的DOM节点，从而大大加快了数据加载和渲染的速度，...
1.即使是上万条数据，也可以瞬间加载完成，绝对不卡。这是JS做的，不信？试试看 2.JS表格的标题行固定，一直是个头痛的问题，在这里得到完美解决 3.它的样式可不是写死的哦，完全可以由CSS来制定，方便实用 4.设计...
在JavaScript（JS）前端开发中，处理Excel大数据的导入是一项挑战。随着Web应用程序对数据处理能力的需求提升，前端工程师必须找到有效地处理大量数据的方法，而不仅仅是依赖后端服务器。本主题将深入探讨如何使用...
在前端开发中，数据导出到Excel是常见的需求，例如用户需要下载表格数据以便离线查看或进一步处理。 2. **ActiveXObject** - 在旧版本的Internet Explorer（IE）浏览器中，可以使用ActiveXObject来创建Excel应用...
本文将详细介绍如何基于Vue来优化这种情况，确保即使面对数十万条数据，表格也能流畅运行。 首先，解决思路来源于实际项目需求。例如，某公司的定位系统会产生大量的定位数据，如果一次性展示这些数据，会导致表格...
"一万用户表"这个项目显然关注的是如何有效地处理和展示大量数据，例如在一个网页上展示一万条用户信息。在这种场景下，高效的数据加载、排序、筛选以及良好的视觉呈现都显得尤为关键。 jQuery UI 是一个强大的...
接下来，通过一个循环向上述表中批量插入了50万条记录。这种方式能够快速填充数据库，便于后续测试分页功能的效果。 ```sql DECLARE @i INT SET @i = 1 WHILE @i BEGIN INSERT INTO redheadedfile (filenames, ...
- **应用场景**: 在处理数万条记录的大数据集中尤为重要。 **5. 处理大型数据集-智能渲染** - **技术**: 使用智能渲染技术减少内存占用并提高加载速度。 - **优点**: 即使面对庞大数据集也能保持高效运行。 - **...
这是一个ant的虚拟表格，用于解决大数据渲染时页面卡顿的问题，本组件是对ant.desigin中Table组件进行一层封装，属性完全与原组件表保持一致的，可以让你实例中处理渲染1000万条数据，页面也非常流畅。 设计说明 ...
本系统的功能： ...注明：我自己的电脑上向一张数据表循环插入380万条数据后，总数据库大小为450M，程序运行正常。一个数据库可以包含多个数据表，那个数据量上千万估计不成问题。如需帮助，请联系qq：448211649
- 对于动态加载的数据，可以使用Selenium模拟浏览器行为，获取完整页面内容。 #### 数据存储 - 抓取到的数据可以存入数据库，也可以以CSV或JSON格式保存至文件系统。 ### 4. 机器学习应用 通过对大量楼盘数据的...
例如，假设有一个包含99999万条记录的商品表，一次性加载所有数据不仅消耗流量，还会对服务器性能造成压力。 相比之下，后端分页更加高效。它每次仅查询和返回用户当前查看页的数据，比如在MySQL中，可以使用`...
8. **性能优化**：在实现仿阿里云UI的过程中，还需要考虑性能优化，如减少HTTP请求、压缩资源、利用CDN加速、优化图片和CSS/JS的加载顺序等。 9. **测试与调试**：最后，我们需要进行跨浏览器测试和兼容性测试，...
一些不太明显的功能包括：“下载CSV”：下载CSV文件，该文件可以加载到电子表格程序（如Excel）中；按住Shift键的同时单击，将在下载的CSV文件中包含23andMe ID。如果包含23andMe ID，则可以使用“导入CSV”按钮重新...