更改rich:dataTable中一行的背景颜色 [英] change background color of a row in rich:dataTable
本文介绍了更改rich:dataTable中一行的背景颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在rich:datatable中有一行,在其中的一列中有一个链接.我需要更改所选行的背景色.我怎样才能做到这一点?
i have a row in rich:datatable, which has a link in one of its column. Onclick of this click i need to change the background color of the selected row. how can i achieve this?
推荐答案
您可以使用以下代码进行此操作:
You can do this with the following code:
<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:
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;
}
上面的示例将在单击该行时突出显示该行.
The above example would highlight the row when it is clicked.
要在链接上进行操作,您可以执行以下操作:
To do it on a link you could do something like:
<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更改为:
and then change your javascript to:
jQuery.noConflict();
function highlightSingleRow(lnk) {
jQuery(lnk).parent().parent().parent().find('tr').removeClass('highlight-row');
jQuery(lnk).parent().parent().addClass('highlight-row');
}
这篇关于更改rich:dataTable中一行的背景颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文