萬盛學電腦網 >> 腳本專題 >> javascript >> Js表格萬條數據瞬間加載實現代碼
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>javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved