체크 박스 선택에서 데이터 테이블 행 색상 변경

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}의 토글 링에 그 행이 다른 배경 색상을 수신 할.

<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> 

하지만 그건 아무 소용이입니다 : 내 XHTML이를 추가하려고 this question의 대답에 따라

. 함수가 호출되는지 알기 위해 몇 가지 경고를했습니다. 그러나 tagName 또는 linha 변수의 속성을 보려고하면 null이 반환됩니다.

또 다른 흥미로운 점이 있습니다. 콜백이 이전 확인란의 값으로 호출되고 있습니다. 체크 박스를 선택하면 자바 스크립트는 status에서 false를 수신합니다. 선택하지 않으면 true입니다.

체크 박스 토글과 함께 행 배경 토글을 어떻게 만들 수 있습니까?

Answer 1

좋아, 그곳에는 수많은 버그와 문제가있었습니다.

첫째 :

primefaces는 (피부)에 따라 빈 이미지 행의 배경을 설정합니다. 당신은 배경의 url()를 오버라이드 (override) 할 필요가 있으므로 CSS가 보일 것 같은 :

.linhaDestacada {배경 :! URL ('') 레드 중요한;}

둘째 :

ajax 태그에서 javascript를 호출하면 jQuery가 null을 찾을 수 있습니다 (이유는 무엇입니까?). onchange 속성을 사용하여 콜백을 checkbox 태그로 이동하십시오.

이었다 자바 스크립트 조각 마지막 :

<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 클래스가 삭제되지되고 있었다)에는 ... 당신을 만 업데이트해야하는지 정말이 경우, 체크 박스와 명령 단추에 (중요.

<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이 렌더링되지 않았습니다. 그것은 아약스 응답에 업데이 트되지만 브라우저는 그것을 표시하지 않았다. 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>