更改复选框选择上的DataTable行颜色

Question

我有一个<p:dataTable>，在最后一列上有一个复选框。我想根据复选框的状态对表格的行进行着色。

<p:dataTable var="acs" value="#{myBean.listaRevogaveis}" 
emptyMessage="#{rotulo.mensagemSemDados}" paginator="true" 
rows="10" id="tableacs" 
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"> 
<p:column headerText="Nome" sortBy="#{acs.nome}" 
filterBy="#{acs.nome}"> 
<h:outputText value="#{acs.nome}" /> 
</p:column> 
<p:column headerText="Address" sortBy="#{acs.address}" filterMatchMode="contains" 
filterBy="#{acs.address}" filterMaxLength="8"> 
<h:outputText value="#{acs.address}" /> 
</p:column> 
<p:column headerText="Perfil" sortBy="#{acs.cdPerfil}" 
filterBy="#{acs.cdPerfil}" filterMaxLength="2"> 
<h:outputText value="#{acs.cdPerfil}" /> 
</p:column> 
<p:column headerText="Cadastramento"> 
<h:outputText value="#{acs.tsSolicitacao}"> 
<f:convertDateTime pattern="dd/MM/yyyy" /> 
</h:outputText> 
</p:column> 
<p:column headerText="Concedido"> 
<h:outputText value="#{acs.concedidoPor}" /> 
</p:column> 
<p:column headerText="Revogar"> 
    <p:selectBooleanCheckbox value="#{acs.ativo}" > 
<p:ajax event="valueChange" oncomplete="toggleColor(this, #{acs.ativo}" listener="#{myBean.checkBox}" update="@form"/> 
</p:selectBooleanCheckbox> 
</p:column> 
</p:dataTable> 

等等#{acs.ativo}的触发我想该行收到不同的背景颜色。

继this question的答案，我想加入到我的XHTML：

<style type="text/css"> 
.linhaDestacada { background-color: red !important;} 
</style> 
<script type="text/javascript"> 
    function toggleColor(col, status) { 

     var linha = jQuery(col).parent(); 

     if(status) { 
      linha.removeClass('linhaDestacada'); 
     } else { 
      linha.addClass('linhaDestacada');   
      } 
     } 

</script> 

但是，这是没有用的。我提出了一些警告，看看函数是否被调用，它是。但是，尝试查看tagName或linha变量的任何属性都会返回null。

还有一个有趣的地方，回调被调用复选框的前一个值。当选中该框时，javascript toggleColor()在status上收到了错误，当其未选中时，它会接收到true。

如何使行背景与复选框切换在一起？

Answer 1

好吧，那里有一个错误和问题的TON。

第一：

primefaces设置行到空白图像（取决于皮肤）的背景。你必须重写背景的url()，所以CSS应该看起来像：

.linhaDestacada {背景：URL（ ''）红色重要;}

二：

从ajax标签调用JavaScript导致jQuery找到空值（不知道为什么）。将回调移动到复选框标记，使用其onchange属性。

的JavaScript片段是最后的：

<script type="text/javascript"> 
    function toggleColor(col, status) { 

     var linha = jQuery(col).parent().parent().parent().parent().parent(); 

     if(status) { 
      linha.removeClass('linhaDestacada'); 
      //alert("remove " + linha.html()); 
     } else { 
       linha.addClass('linhaDestacada'); 
       //alert("add " + linha.html()); 

      } 
     } 

    </script> 

三：

更新整个形式是一个没有没有（的CSS文件添加JavaScript类中被删除）...你应该只更新真正重要的东西（在这种情况下，复选框和命令按钮。

<p:selectBooleanCheckbox value="#{acs.ativo}" onchange="toggleColor(this, #{acs.ativo})"> 
    <p:ajax event="valueChange" listener="#{myBean.checkBox}" update="@this :formAcesso:btnRevogaNuke" /> 
</p:selectBooleanCheckbox> 

四th：

commandButton未呈现。它会在ajax响应中更新，但浏览器不显示它。发现this answer，并且移动封装元素的ID btnRevogaNuke：

<h:panelGroup id="btnRevogaNuke" layout="block"> 
    <p:commandButton icon="ui-icon-alert" value="Confirmar rendered="#{myBean.confirmar()}" style="margin-left:600px;" action="#{acessoBean.revogaTodos()}" process="@this @form" update="@form" /> 
</h:panelGroup>