日期:2014-05-16  浏览次数:20445 次

JS表格,万条数据瞬间加载(转载)

在Ajax动态加载数据的实际应用中,大家都习惯了一种思维方式:一条数据创建一行。
于是如果数量大的时候,一次性要加载完数据的话,浏览器就会卡上半天

受Flex的DataGrid控件的启发,在Flex的DataGrid控件中,展示数据的方法并不是有多少条数据就创建多少行,它最多只创建你在界面上所看到的十几二十行(假设为n行),如果数据多的话,在滚动过程中,会从数据中抽取你应该看到的这n行数据,重新展示在已经创建好的那n行控件中。
也就是说,Flex的DataGrid控件中,我们实际上看到的仅仅是那n行控件,只是它们展示的数据是根据滚动条状态来筛选出来的。

所以,如果在JS中,也用类似的方法实现,那么就是上万条数据,可能也只要创建几十个Dom而已,效率自然快得多了。
废话不多说,上代码。首先,需要一个滚动条

JScript code
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]; } Ref