用 Rico LiveGrid 小部件创建数据集导航

核心提示： 通过 Rico，将拖放之类的可视化效果添加到 Web 页面也很容易，用 Rico LiveGrid 小部件创建数据集导航(2)，通过 Rico 库，可以将任何 HTML 或 JavaScript 对象定义为 draggable（可拖放的） 或一个 drop zone（拖放区），如果网格中实现了排

通过 Rico，将拖放之类的可视化效果添加到 Web 页面也很容易。通过 Rico 库，可以将任何 HTML 或 JavaScript 对象定义为 draggable（可拖放的） 或一个 drop zone（拖放区）。这样定义之后，就可以在页面上拖动可拖放对象，并将其放入一个或多个用户定义的拖放区。Rico 自动处理该功能的所有实现细节，所以只需编写几行代码。

如果使用 Rico，那么添加淡入、动画缩放和位移、旋转等动画效果也是非常简单的。最流行的一个 Rico 小部件就是 Accordion，它显示一组可折叠的抽屉。每个抽屉有一个抽屉标题和一个内容区。单击一个抽屉标题就可以显示那个抽屉的内容，同时也隐藏其他抽屉中的内容。另一个非常流行的小部件是 LiveGrid，本文的后面将着重讲到这个小部件。

一个简单的 LiveGrid

图 1 中的 LiveGrid 是一个可滚动的信息表，每当用户单击滚动条，表中的数据就动态更新。这个表被连接到一个活动的数据源，对这个表的更新是借助 Ajax 完成的。

图 1. 初始的 LiveGrid

LiveGrid 显示一个可滚动的包含 20 部影片的列表。每当用户单击滚动条，表的内容就随之更新，显示新的一组影片。当需要新的一组数据时，Rico 对服务器发出 Ajax 调用。它使用缓冲技术，以取得更好的性能，并使滚动看上去更为流畅。因此，可能并不是每次单击滚动条都会导致 Ajax 请求。Rico 首先使用缓冲区中的数据来更新网格，当用光了缓冲区中所有的数据时，才发出 Ajax 请求。图 2 显示了用户单击一次滚动条后 LiveGrid 看上去的样子。LiveGrid 还支持列排序。如果网格中实现了排序，那么用户可以单击列名，然后对这个列进行排序。