我在 rich:datatable 中有一行,其中的一列中有一个链接。单击此单击时,我需要更改所选行的背景颜色。我怎样才能做到这一点?
您可以使用以下代码来执行此操作:
<a4j:form id="myfrm">
<rich:dataTable id="myTbl" value="#{myBean.tblData}" var="tblData">
<rich:column>
<f:facet name="header">Col1</f:facet>
<h:outputText value="#{tblData}" />
</rich:column>
<rich:column>
<f:facet name="header">Col2</f:facet>
<h:outputText value="#{tblData}" />
</rich:column>
<a4j:support event="onRowClick" oncomplete="highlightSingleRow(this)"/>
</rich:dataTable>
</a4j:form>
JavaScript:
jQuery.noConflict();
function highlightSingleRow(col) {
jQuery(col).parent().parent().find('tr').removeClass('highlight-row');
jQuery(col).parent().addClass('highlight-row');
}
CSS:
.highlight-row {
background-color: cyan;
}
上面的示例将在单击该行时突出显示该行。
要在链接上执行此操作,您可以执行以下操作:
<rich:dataTable id="myTbl" value="#{myBean.tblData}" var="tblData">
<rich:column>
<f:facet name="header">Col1</f:facet>
<h:outputLink onclick="highlightSingleRow(this)" value="#">
<h:outputText value="link" />
</h:outputLink>
</rich:column>
<rich:column>
<f:facet name="header">Col2</f:facet>
<h:outputText value="#{tblData}" />
</rich:column>
</rich:dataTable>
然后将你的 javascript 更改为:
jQuery.noConflict();
function highlightSingleRow(lnk) {
jQuery(lnk).parent().parent().parent().find('tr').removeClass('highlight-row');
jQuery(lnk).parent().parent().addClass('highlight-row');
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)