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

核心提示： 图 2. 单击滚动条后的 LiveGrid创建一个 LiveGrid作为一个学习的例子，我将展示如何创建 Movies LiveGrid above，用 Rico LiveGrid 小部件创建数据集导航(3)，您需要从 Rico 主页下载 download rico.js 和 prototype

图 2. 单击滚动条后的 LiveGrid

创建一个 LiveGrid

作为一个学习的例子，我将展示如何创建 Movies LiveGrid above。您需要从 Rico 主页下载 download rico.js 和 prototype.js。注意，Rico 库使用了另一个开放源代码框架 Prototype 中的特性，因此这里需要 prototype.js。此外，还需要一个 Web 应用服务器，用于处理来自 Rico 的 Ajax 调用。对于这个例子，我将使用 Apache Tomcat 6.0。

可以从编写这个例子的客户端代码开始。首先要做的是将 rico.js 和 prototype.js 库包括在页面中。假设这两个库文件与 HTML 文件在同一个目录中，清单 1 展示了如何将这两个库包括在页面中。

清单 1. 从 Rico 和 Prototype 库开始

<script　src="prototype.js"></script>　
<script　src="rico.js"></script>　

接下来，添加一个占位符，用于容纳显示图 1 中文本 "Showing 1 - 5 of 20 Movies" 的标签。每当用户单击滚动条，这个标签就会更新。

清单 2. 设置 showLabel

<div　id="showingLabel"　>Showing　1　-　5　of　20　Movies</div>　

然后，添加显示图 1 中列名（例如 Number、Title、Year）的 LiveGrid 标题。

清单 3. 添加 LiveGrid 标题

<table　cellspacing="0"　cellpadding="0"　width="400">　
　　<tr>　
　　　　<th　bgcolor="#999999"　width="30">#</th>　
　　　　<th　bgcolor="#999999"　width="310">Title</th>　
　　　　<th　bgcolor="#999999"　width="60">Year</th>　
　　</tr>　
</table>