Js表格万条数据瞬间加载.docVIP

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 //控件尺寸 ????}; } Stotype = (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.addEventListe