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

<?xml　version="1.0"　encoding="ISO-8859-1"?>　
　　<ajax-response>　
　　　　<response　type="object"　id='movie_grid_updater'>　
　　　　　　<rows　update_ui='true'　>　
　　　　　　　　<tr>　
　　　　　　　　　　<td>1</td>　
　　　　　　　　　　<td>Star　Wars</td>　
　　　　　　　　　　<td>1977</td>　
　　　　　　　　</tr>　
　　　　　　　　<tr>　
　　　　　　　　　　<td>2</td>　
　　　　　　　　　　<td　>The　Godfather</td>　
　　　　　　　　　　<td>1972</td>　
　　　　　　　　</tr>　
　　　　　　　　...　
　　　　　　</rows>　
　　</response>　
</ajax-response>　

注意，response 标记中 id 属性的前两个单词（"movie_grid"）与之前为 LiveGrid 定义的 HTML 表中的 id 属性是匹配的。为了使 Rico 更新 LiveGrid 中的数据，它们应该匹配。在通常情况下，服务器端脚本或 servlet 连接到数据源，并生成以上格式的 XML。Rico 负责从这个 XML 响应中提取数据，并用新数据填充 LiveGrid。注意要将响应的 content-type 设置为 "text/xml"。如果没有这样做，LiveGrid 将不能工作。XML 版本和编码也必须分别设置为 "1.0" 和 "ISO-8859-1"。可以如清单 9 所示用 Java™ 代码设置 content-type。

清单 9. 设置 Ajax 响应的 content-type

response.setHeader("Content-Type",　"text/xml");　

4 个数据参数

现在，您可能对脚本或 servlet 如何知道何时生成什么数据感到困惑。在本文的前面，我提到 Rico 框架使用了缓冲技术，当它需要数据时，它就会请求数据。当 Rico 向后端发出一个 Ajax 请求时，它可能会以 URL 中的查询字符串的形式发送 4 个参数。当提供了这些参数时，后端必须使用这些参数来生成适当的 Ajax 响应。这 4 个参数是：

offset表明返回的数据集中的第一行数据是什么。举个例子，假设 LiveGrid 一开始装载时 offset 为 0。Rico 在初始装载期间取出 150 行数据，并使用缓冲区存储该数据。在显示完所有 150 行数据之后，它将 offset 值设为 151，并向后端发出一个 Ajax 请求。page_size表明 Rico 要后端返回的数据的行数。sort_col表明将数据返回到 Rico 之前，按哪个列对数据进行排序。sort_dir表明按升序还是降序（ACS 或 DECS）对列进行排序。

编写了以上代码之后，就可以将浏览器指向 HTML 页面，看看 LiveGrid 是什么样子。

结束语

Rico 是一个开放源码 JavaScript 库，在 Web 应用程序中可以使用这个库为用户提供丰富的特性。在本文中，我通过一个展示如何使用 LiveGrid 小部件替代 Web 应用程序中传统分页技术的一个实例，解释了 Rico 的基础知识，并演示了 LiveGrid 小部件。