相关内容

返回首页

推送和部分表更新第二部分 – 突出显示变更

发布者    |       Rich Faces

这个简短且我认为简单的解决方案是为了回答这篇文章之后提出的主要问题，并解决了如何在客户端突出显示更新后的表格单元格。

这里的主要问题是我们使用reRender更新表格子元素而不是单元格本身。因此，我们无法简单地通过列上的EL绑定定义styleClass来轻松突出显示变更。（顺便说一句，整个单元格甚至整行更新的功能已经在为未来的4.x版本进行设计。）

我们将使用推送组件的data属性将变更列表从后端bean序列化到客户端，并使用rich:jQuery组件来突出显示与列表对应的项。

完整页面代码（一些与上一篇文章代码完全相同的页面部分已被剪裁以缩短）

<ui:composition> 
<style>
.highlight{
	background-color: yellow;
}
</style>
<h:form id="choicesForm">
	<rich:jQuery selector=".votesClass"
		query="each(function(key){
		if (param[key].votesCount > 0) jQuery(this).addClass('highlight'); 
		else jQuery(this).removeClass('highlight'); })"
		name="jqhighlight" />
	<rich:dataTable value="#{choicesBean.choices}" var="choice"
		rowKeyVar="row" ajaxKeys="#{choicesBean.keysSet}" id="choices">
		// All the other columns
		<rich:column id="votes" styleClass="votesClass">
			<f:facet name="header">
				<h:outputText value="Current Votes" />
			</f:facet>
			<h:outputText value="#{choice.votesCount}" id="choiceVotes" />
		</rich:column>
	</rich:dataTable>
		<a4j:push enabled="#{choicesBean.enabled}" interval="3000"
			timeout="3000" eventProducer="#{choicesBean.addListener}" id="push"
			limitToList="true" action="#{choicesBean.processUpdates}"
			reRender="choiceVotes, push, tempResults" data="#{choicesBean.lastVotes}" oncomplete="jqhighlight(null,data)"/>
	</h:form>
</ui:composition>

让我们回顾一下代码中的关键变更

  • 我们添加了highlight CSS类定义。此类将应用于更新的投票单元格。
  • votesClass被添加到投票列中。这样做是为了在jQuery选择器中使用它。我们将搜索所有应用了此类的td元素。
  • 在推送组件中添加了data定义，以便在更新发生后将变更列表序列化到客户端。
  • 向推送中添加了oncomplete，以便调用已注册的jQuery组件来处理更新。data参数包含序列化的变更列表。第一个参数可以是稍后添加到选择器的DOM元素，但由于我们打算通过CSS类使用选择器，我们在这里传递null。

让我们更详细地回顾一下关键新增

<rich:jQuery selector=".votesClass"
	query="each(function(key){
	if (param[key].votesCount > 0) jQuery(this).addClass('highlight'); 
	else jQuery(this).removeClass('highlight'); })"
	name="jqhighlight" />
  • name="jqhighlight" - 将jQuery组件生成的代码注册为具有指定名称的JavaScript函数。
  • selector=".votesClass" – 创建查询选择器，结果将是所有应用了votesClass的元素。
  • 在 query 中定义的代码 - 简单地遍历由选择器返回的元素，如果对应的数据元素返回非空值变化，则此元素被赋予 高亮 css 类。如果元素没有变化，则如果存在则移除 高亮 类。

因此，现在推送更新的结果将如下所示

完整的演示代码可在 richfaces-demo 项目下的 3.3.x 社区分支 中找到，并可以从 匿名 svn 下载。

返回顶部