js 成千上万条记录显示

来源：互联网发布：花火大会知乎编辑：程序博客网时间：2024/05/03 23:04

这个标题只是为了吸引眼球

当前端开发人员面对成千上万条记录要显示的时候，我们该怎么处理？创建上千上万个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> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .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> <mce:script type="text/javascript"></mce:script> </body></html>