开发学院网页设计JavaScript 用 Rico LiveGrid 小部件创建数据集导航 阅读

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

 2010-03-09 00:00:00 来源:WEB开发网   
核心提示: <?xmlversion="1.0"encoding="ISO-8859-1"?><ajax-response><responsetype="object"id='movie_grid_update

<?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 小部件。

上一页  2 3 4 5 6 7 

Tags:Rico LiveGrid 部件

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
    赞助商链接