先看一下最终效果:
使用DevExpress ASP.NET实现上图效果的方法
您可以用以下DevExpress ASP.NET控件实现上图中的效果:
- ASPxCallback
- ASPxLoadingPanel
- ASPxPanel
- ASPxClientUtils对象中的JavaScript方法
你可以到示例代码中心查看代码:
ASPxCallback - 鼠标滚动时如何加载内容 - 当鼠标向下滚动时自动加载内容
下面让我们看看"无限分页"方案能给我们带来的好处和一些可能会遇到的问题。
大型数据集
现在大数据集在网络上随处可见,一旦用户需要处理这些一T或更多的信息时,你该怎么办呢?你可以将它们分成小块的数据分页:
无限分页或无限滚动
无限分页 (或无限滚动)被许多公司使用,如Facebook、Bing、腾讯、新浪、twitter等。
当一个页面有大量内容提交时,无限分页是一个不错的选择。一些不需要显示的数据内容没有必要一次性加载和显示,当用户鼠标向下滚动时,再自动加载更多的数据。(像上面的gif动画显示的那样)
为什么用无限分页?
我建议这种做法,原因有两个:
- 性能 - 当你没有一次性加载数千行和数百列数据时,你的网站速度会更快。
- 流畅 - 最终用户可以使用AJAX无缝加载更多信息继续他们的体验。
Jeff Atwood有一个梦幻般的博客文章,标题为"分页的结束"。我从里面截取了一小段:
在完美世界里,每一个搜索结果都在一个页面,只有一条记录并且就是你正想找的。
分页也是阻力。
我的意思不是说所有的分页都应当被无限分页代替,但是我们作为软件开发者,应当避免产生成千上万的列表和分页,这无疑增大了用户的负担。记住,我们发明计算机是为了使人们的生活更容易,而不是更困难。
Google研究证实最终用户通常不喜欢看到所有的数据:
用户测试报告告诉我们搜索者更喜欢整页浏览、单页内容的版式,而不是只包含部分内容和许多分页符的页面。
有趣的是,用户不喜欢整页浏览花长时间加载(例如,当整页浏览加载需要一些时间时,用户认为它包含许多图像)。这是有道理的,因为我们知道,用户对缓慢不太满意。所以,整页浏览通常先加载需要显示的部分。作为一个站长,重要的是要平衡这种偏好页面的加载时间和整体用户体验。
无限滚动也有一些缺点,比如滚动条的问题,深层链接,后退按钮的位置,以及其他Jeff的文章(The End of Pagination)中提到的问题。
实验,重复,实验...
重复和测试各种可用性方案是良好用户界面的关键。我建议你使用DevExpress ASPxCallBack,ASPxLoadingPanel等尝试无限分页。无限分页的功能包含在ASPxGridView中:ASPxGridView Virtual scrolling/paging示例
你应该努力使分页无关高于一切,因为用户永远只会看到他们需要的那一条内容。 -Jeff Atwood
示例代码
示例代码中心的操作流程如下:
- 渲染后,当用户鼠标向下滚动页面,我们就处理浏览器"滚动"事件。
- 当滚动到页面的底部,我们产生一个回调(使用ASPxCallback),从服务器获得新的数据部分。
- 然后,我们将已收到的内容添加到dataContainerElement DIV元素的后面。
欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明:文章转载自:DevExpress控件中文网 [https://www.devexpresscn.com/]
本文地址:https://www.devexpresscn.com/post/186.html