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

Js表格，万条数据瞬间加载在Ajax动态加载数据的实际应用中，大家都习惯了一种思维方式：一条数据创建一行。于是如果数量大的时候，一次性要加载完数据的话，浏览器就会卡上半天受Flex的DataGrid控件的启发，在Flex的DataGrid控件中，展示数据的方法并不是有多少条数据就创建多少行，它最多只创建你在界面上所看到的十几二十行（假设为n行），如果数据多的话，在滚动过程中，会从数据中抽取你应该看到的这n行数据，重新展示在已经创建好的那n行控件中。也就是说，Flex的DataGrid控件中，我们实际上看到的仅仅是那n行控件，只是它们展示的数据是根据滚动条状态来筛选出来的。所以，如果在JS中，也用类似的方法实现，那么就是上万条数据，可能也只要创建几十个Dom而已，效率自然快得多了。废话不多说，上代码。首先，需要一个滚动条Scrollbar.js复制代码1. function Scrollbar() 2. this.options = 3. total : 0, /数据总数4. pos : 0, /当前滚动位置5. itemSize : 20, /单项尺寸6. size : 200 /控件尺寸7. ;8. 9. Stotype = (function () 10. function setOptions(options) 11. for (var attr in options) 12. this.optionsattr = optionsattr;13. 14. Refresh(this);15. 16. function Refresh(_this) 17. if (!_this.created)18. return; /设置控件高度19. _this.bar.style.height = _this.options.size + px;20. /设置内容高度21. var ch = _this.options.total * _this.options.itemSize;22. _this.content.style.height = ch + px;23. 24. /获取滚动位置25. function getPos() 26. var top = this.bar.scrollTop;27. var pos = parseInt(top / this.options.itemSize);28. return pos;29. 30. /每页可展示的数据数量31. function getPageItems() 32. return this.options.size / this.options.itemSize;33. 34. /滚动事件响应35. function OnScroll(_this) 36. var pos = _this.getPos();37. if (pos = _this.options.pos)38. return;39. _this.options.pos = pos;40. _this.onScroll(pos);41. 42. /滚动条创建43. function CreateAt(dom) 44. var _this = this;45. var bar = document.createElement(div);46. var content = document.createElement(div);47. bar.appendChild(content);48. bar.style.width = 19px;49. bar.style.overflowY = scroll;50. bar.style.overflowX = hidden;51. if (bar.attachEvent) 52. bar.attachEvent(onscroll, function () 53. OnScroll(_this);54. );55. else 56. /firefox兼容57. bar.addEventListener(scroll, function () 58. OnScroll(_this);59. , false);60. 61. content.style.backgroundColor = white;62. content.style.width = 1px;63. this.bar = bar;64. this.content = content;65. if (typeof(dom) = string) 66. dom = document.getElementById(dom);67. 68. dom.innerHTML = ;69. dom.appendChild(this.bar);70. this.created = true;71. Refresh(this);72. 73. return 74. setOptions : setOptions,75. CreateAt : CreateAt,76. getPos : getPos,77. getPageItems : getPageItems,78. onScroll : null79. /模拟滚动条事件80. ;81. )();页面代码：复制代码1. 2. 3. 4. 5. 6. 表格控件7. 8. 9. 10. 11. var data = ;12. /创建一万条示例数据13. for (var i = 0; i 10000; i+) 14. var row = 15. id: i,16. text: text + i17. ;18. data.push(row);19. 20. /创建滚动条21. var scrbar = new Scrollbar();22. window.onload = function() 23. scrbar.CreateAt(divScroll);24. scrbar.setOptions(25. total: 10000,26. size: 30027. );28. scrbar.onScroll = function(pos) 29. ShowData(pos);30. 31. /获取模板32. var items = scrbar.getPageItems();33. var tpl = document.getElementById(trTpl);34. tpl.parentNode.removeChild(tpl);35. /仅创建所看到的几十行表格，所以自然快得多36. var list = document.getElementById(tblList);37. for (var i = 0; i data.length & i items; i+) 38. var nr = tpl.cloneNode(true);39. /从模板行复制新行40. list.appendChild(nr);41. 42. ShowData(scrbar.getPos();43. 44. /根据滚动条，展示数据45. function ShowData(pos) 46. var n = scrbar.getPageItems();47. var rows = document.getElementById(tblList).rows;48. for (var i = 0; i n; i+) 49. var row = rowsi;50. var item = datai + pos;51. row.cellstdID.innerHTML = itemid;52. row.