使用 Richfaces JQuery 突出显示选择答案

【问题标题】：Highlight selection using Richfaces JQuery使用 Richfaces JQuery 突出显示选择
【发布时间】：2012-09-03 19:50:00
【问题描述】：

我正在尝试突出显示rich:dataGrid 中的选择。这就像当我点击dataGrid中的一个链接时，会打开一个modalPanel供用户选择图像，当modalPanel关闭时，新选择的图像将在dataGrid中刷新。为此，我正在从 modalPanel 重新渲染 dataGrid。这工作正常。现在，我想突出显示用户选择。当我使用下面的 Rich:jquery 时，它会突出显示，但随后会弹出 modalPanel 并重新渲染。所以突出显示的行转到它的原始自我。

JSF：

<rich:dataGrid value="#{startupBean.choiceKeys}" var="mapEntry" columns="#{startupBean.rowSize}" styleClass="rich-table">


                                 <rich:dataGrid id="choiceSub" styleClass="rich-table" value="#{mapEntry.value}" var="ObjBO" columns="2">
                                       <f:facet name="header">
                                          <h:outputText value="Choice:#{mapEntry.key}"></h:outputText>
                                       </f:facet>
                                 <h:panelGrid columns="2" border="0" styleClass="className">
                                 <rich:panel>
                                     <f:facet name="header">
                                     <a4j:commandLink id="objs"  action="#{startupBean.getCategory}" reRender="materialTree" oncomplete="Richfaces.showModalPanel('selectMaterial',{top:'100px', left:'400px', height:'450px', width:'450px'});" >
                                        <h:outputText value="#{ObjBO.displayName}" binding="#{startupBean.outTxt}"/>
                                            <f:setPropertyActionListener target="#{startupBean.key}" value="#{mapEntry.key}" />
                                        </a4j:commandLink>   
                                     </f:facet>
                                        <h:graphicImage width="50" height="50" id="choice"  alt="jsf-sun" url="#{ObjBO.color_url}" value="#{ObjBO.color_url}"> 
                                        </h:graphicImage>
                                        </rich:panel> 
                                 </h:panelGrid>
                                 </rich:dataGrid>
                                 <rich:jQuery selector="#choiceSub tr" query="click(function(){jQuery(this).addClass('active-row')})"/>
                        </rich:dataGrid>

CSS：

.active-row {
    background-color: red;
}

还有其他方法吗？请务必告诉我。

PS：我正在使用 JSF2.0、Richfaces 3.2、Apache Tomcat 7、Java 1.7。

谢谢，简

【问题讨论】：

它是 RichFaces 3.2。我在使用 4.X 版本时遇到了一些问题。

标签： jquery jakarta-ee jsf-2 richfaces

【解决方案1】：

当您重新渲染一个元素时，它会被服务器生成的新内容所取代。 IE。之前动态应用的任何其他格式或更改（如 Rich:jQuery 中的 jQuery 所做的那样）都会丢失。另见rich:jQuery手册http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/rich_jQuery.html中的问题描述。

基本上，您必须在 ajax 返回后再次应用行突出显示。如果您需要更多说明，请发表评论。

【讨论】：