首頁 > 開發者 > JavaScript
http://bbs.csdn.net/topics/350229446
當前端開發人員面對成千上萬條記錄要顯示的時候，我們該怎麼處理。建立上千上萬個Dom對象。
我的思路就是：把看到的地區當畫布，建立足夠能展現介面的Dom就夠了。
比如一個螢幕的高度一般是1000像素左右，假設一條記錄佔用的高度是24像素，我們只用建立42個對象即可。
接下來就是對這42個對象進行資料填充，通過捲軸調整填充資料的起始下標。
樣本：
http://csdntools.googlecode.com/svn/trunk/demo/biglist.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>大資料量顯示 Demo</title> <style type="text/css"> .panel{ overflow:scroll; width:200px; height:80%; } .panel .scroll{ } .item{ width:500px; height:20px; } .odd{ background-color:#ccc; } .items{ overflow:hidden; position:absolute; } .red{ color:red; } .green{ color:green; } </style> </head> <body> <div><input id="sort_index" type="button" value="按序號排"/><input id="sort_random" type="button" value="按隨機值排"/></div> <script> window.console = window.console || { log: function() {} }; function absolutePoint(element) { var result = [element.offsetLeft, element.offsetTop]; element = element.offsetParent; while (element) { result[0] += element.offsetLeft; result[1] += element.offsetTop; element = element.offsetParent; } return result; } /** * 設計：王集鵠 * 日期：2010年12月17日 * 歡迎關註：http://t.sina.com.cn/zswang */ function ListView(options){ options = options || {}; var self = this, $C = function(tagName) { return document.createElement(tagName); }, // 建立節點 p, height, item_height, // 項高 view_count, // 可見項條數 parent = options.parent || document.body, // 容器 height, // 面板曆史高度 div_panel = $C("div"), div_scroll = $C("div"), div_items = $C("div"), div_items_list = [$C("div")], freed = [div_panel, div_scroll, div_items]; // 可釋放的對象 div_panel.className = "panel"; parent.appendChild(div_panel); div_items.className = "items"; document.body.appendChild(div_items); div_scroll.className = "scroll"; div_panel.appendChild(div_scroll); div_panel.onscroll = function() { doChange(); } div_panel.onresize = function() { doChange(); } div_items_list[0].className = "item"; div_items.appendChild(div_items_list[0]); div_scroll.style.width = div_items_list[0].clientWidth + "px"; item_height = div_items_list[0].clientHeight; p = absolutePoint(div_panel); with(div_items.style) { left = p[0] + "px"; top = p[1] + "px"; width = div_panel.clientWidth; height = div_panel.clientHeight; } /** * 介面改變 */ function doChange() { if (!item_height) return; var i, div; if (height != div_panel.clientHeight) { height = div_panel.clientHeight; view_count = parseInt(height / item_height); for (i = div_items_list.length; i < view_count; i++) { div = $C("div"); div.className = "item" + (i % 2 == 0 ? "" : " odd"); div_items.appendChild(div); div_items_list.push(div); } for (i = 0; i < div_items_list.length; i++) { div_items_list[i].style.display = i < view_count ? "" : "none"; } div_scroll.style.height = div_panel.clientHeight + options.count - view_count + "px"; console.log(["view_count", view_count]); } div_items.scrollLeft = div_panel.scrollLeft; if (!options.ondrawitem) return; i = Math.min(view_count, div_items_list.length); while(i--) { // 重新繪製 options.ondrawitem(i + div_panel.scrollTop, div_items_list[i]); } } doChange(); this.doChange = doChange; /** * 釋放Dom對象 */ this.dispose = function() { var i = freed.length; while(i--) { freed[i].parentNode.removeChild(freed[i]); } i = freed.length; while(i--) { div_items_list[i].parentNode.removeChild(div_items_list[i]); } } } function format(template, json) { if (!json) return template; return template && template.replace(/\$\{(.+?)\}/g, function() { return json[arguments[1]]; }) } window.onload = function() { var i = 100000, data = new Array(i); while(i--) { data[i] = { index: i, random: Math.random(), key: (+new Date()).toString(36) }; } var listview = new ListView({ count: data.length, ondrawitem: function(i, div) { div.innerHTML = format("<em>${index}</em> <span class=\"red\">${random}</span> <span class=\"green\">${key}</span>", data[i]); } }); var asc = 1; document.getElementById("sort_index").onclick = function() { asc = -asc; data.sort(function(a, b) { return (a.index - b.index) * asc; }); listview.doChange(); } document.getElementById("sort_random").onclick = function() { asc = -asc; data.sort(function(a, b) { return (a.random - b.random) * asc; }); listview.doChange(); } }; </script> </body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
