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">

　　<head>

　　<title>

　　表格控件

　　</title>

　　</script>

　　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>

　　<thead>

　　<tr>

　　<th>

　　</th>

　　<th>

　　Text

　　</th>

　　</tr>

　　</thead>

　　</td>

　　</td>

　　</tr>

　　</tbody>

　　</table>

　　</body>

　　</html>

教程首页更多教程