js表格萬條數(shù)據(jù)瞬間加載

1、Js表格，萬條數(shù)據(jù)瞬間加載在Ajax動態(tài)加載數(shù)據(jù)的實際應(yīng)用中，大家都習(xí)慣了一種思維方式：一條數(shù)據(jù)創(chuàng)建一行。于是如果數(shù)量大的時候，一次性要加載完數(shù)據(jù)的話，瀏覽器就會卡上半天受Flex的DataGrid控件的啟發(fā)，在Flex的DataGrid控件中，展示數(shù)據(jù)的方法并不是有多少條數(shù)據(jù)就創(chuàng)建多少行，它最多只創(chuàng)建你在界面上所看到的十幾二十行（假設(shè)為n行），如果數(shù)據(jù)多的話，在滾動過程中，會從數(shù)據(jù)中抽取你應(yīng)該看到的這n行數(shù)據(jù)，重新展示在已經(jīng)創(chuàng)建好的那

2、n行控件中。也就是說，F(xiàn)lex的DataGrid控件中，我們實際上看到的僅僅是那n行控件，只是它們展示的數(shù)據(jù)是根據(jù)滾動條狀態(tài)來篩選出來的。所以，如果在JS中，也用類似的方法實現(xiàn)，那么就是上萬條數(shù)據(jù)，可能也只要創(chuàng)建幾十個Dom而已，效率自然快得多了。廢話不多說，上代碼。首先，需要一個滾動條Scrollbar.js復(fù)制代碼1.functionScrollbar()2.this.options=3.total:0數(shù)據(jù)總數(shù)4.pos:0當(dāng)前滾動

3、位置5.itemSize:20單項尺寸6.size:200控件尺寸7.8.9.Scrollbar.prototype=(function()10.functionsetOptions(options)11.f(varattrinoptions)12.this.options[attr]=options[attr]13.14.Refresh(this)15.16.functionRefresh(_this)17.if(!_this.cre

4、ated)18.return設(shè)置控件高度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.else56.firefox兼容57.bar.addE

5、ventListener(“scroll“function()58.OnScroll(_this)59.false)60.61.content.style.backgroundCol=“white“62.content.style.width=“1px“63.this.bar=bar64.this.content=content65.if(typeof(dom)==“string“)66.dom=document.getElementB