js 成千上万条记录显示

最新推荐文章于 2022-08-25 20:22:09 发布

susubuhui

最新推荐文章于 2022-08-25 20:22:09 发布

阅读量887

点赞数

文章标签： div function scroll listview random list

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

当前端开发人员面对成千上万条记录要显示的时候，我们该怎么处理？创建上千上万个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>

susubuhui

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 成千上万条记录显示

<br />这个标题只是为了吸引眼球<br /><br />当前端开发人员面对成千上万条记录要显示的时候，我们该怎么处理？创建上千上万个Dom对象？<br /><br />我的思路就是：把看到的区域当画布，创建足够能展现界面的Dom就够了。<br /><br />比如一个屏幕的高度一般是1000像素左右，假设一条记录占用的高度是24像素，我们只用创建42个对象即可。<br /><br />接下来就是对这42个对象进行数据填充，通过滚动条调整填充数据的起始下标。<br /><br />示例：<br />htt
复制链接

扫一扫