Question

我在rich：datatable中有一行，其中一列中有一个链接。单击此点击我需要更改所选行的背景颜色。我怎么能实现这个目标？

Answer 1

您可以使用以下代码执行此操作：

<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');
}

Answer 2

在链接上添加onclick方法：

<rich:column>
  <h:outputLink onclick="changeBackground(this)" value="#">
    <h:outputText value="link" />
  </h:outputLink>
</rich:column>

脚本（使用jQuery）查找单元格的tr并应用样式：

<script>
    function changeBackground(element){
      jQuery(element).parents('tr:first').addClass('backgroundRed');
    }
</script>

和css例如

.backgroundRed {
    color: #555658;
    background-color: red;
}

在rich：dataTable中更改行的背景颜色

2 个答案: