用 Rico LiveGrid 小部件创建数据集导航
2010-03-09 00:00:00 来源:WEB开发网<?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 小部件。
更多精彩
赞助商链接