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

核心提示： 定义 LiveGrid设置好表和数据之后，就可以定义用于将清单 4 中的 HTML 表变为 Rico LiveGrid 的 JavaScript 函数，用 Rico LiveGrid 小部件创建数据集导航(5)，清单 5 中显示的函数名为 loadGrid 函数，清单 5. 定义 Rico Li

定义 LiveGrid

设置好表和数据之后，就可以定义用于将清单 4 中的 HTML 表变为 Rico LiveGrid 的 JavaScript 函数。清单 5 中显示的函数名为 loadGrid 函数。

清单 5. 定义 Rico LiveGrid

<script>　
　　function　loadGrid()　{　
　　　　var　opts　=　{　　prefetchBuffer:　true,　onscroll　:　updateLabel　};　
　　　　var　liveGrid　=　new　Rico.LiveGrid(　'movie_grid',5,　20,　'MovieData',　opts);　
　　}　
</script>　

loadGrid 函数中的第一行指定 LiveGrid 的选项。当把 prefetchBuffer 选项设为 true 时，就是告诉 Rico 在构造 LiveGrid 时取数据。如果将这个选项设为 false，那么 LiveGrid 装载时没有任何数据，直到单击一次滚动条之后才显示数据。

通过使用 onScroll 选项可以定义一个函数，每当用户单击滚动条时，Rico 就调用这个函数。在这个例子中，需要更新显示文本 "Showing 1 - 5 of 20 Movies" 的 label。为此，可以定义一个名为 updateLabel 的 JavaScript 函数，并让 Rico 在用户单击滚动条的时候调用该函数。还可以使用本例中没有使用的 onscrollidle 选项来定义当滚动暂停或停止时调用的 JavaScript 函数。

另一个有用的选项是 requestParameters，可以使用该选项将额外的参数发送至处理 Ajax 请求的服务。还可以使用 requestParameters 过滤 LiveGrid 中显示的数据。例如，如果只想在 LiveGrid 中显示动作片，那么可以将 requestParameters 设置为 genre=action，处理 Ajax 调用的服务将返回那种类型的影片。

loadGrid 函数中的第二行声明 LiveGrid。构造函数中的第一个参数是被转换成 LiveGrid 的 HTML 表的 ID。在这个例子中，这个 ID 为 "movie_grid"。第二个参数表明要在 LiveGrid 中显示多少行，在这个例子中是 5 行。第三个参数表明 LiveGrid 中的最大行数，在这个例子中为 20。第四个参数应该为负责处理 Ajax 调用的服务器端 script/servlet 的 URL。在这个例子中，我创建了一个名为 MovieData 的 servlet，用于处理来自 Rico 的 Ajax 请求。我将在本文的后面更详细地讨论这个 servlet。最后一个参数是清单 5 中函数的第 1 行定义的变量，该变量定义用于 LiveGrid 的选项。