0

<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}その行に別の背景色が表示されます。

この質問の答えに続いて、これを私の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 が返されます。

別の興味深い点があります。コールバックは、チェックボックスの前の値で呼び出されています。ボックスがチェックされている場合、javascripttoggleColor()は で false をstatus受け取り、チェックされていない場合は true を受け取ります。

チェックボックスの切り替えと一緒に行の背景の切り替えを行うにはどうすればよいですか?

4

1 に答える 1

0

わかりました、その中にたくさんのバグと問題がありました。

初め：

primefaces は、行の背景を空白の画像に設定します (スキンによって異なります)。背景をオーバーライドする必要がurl()あるため、CSS は次のようになります。

.linhaDestacada { background: url('') red !important;}

2番：

ajax タグから JavaScript を呼び出すと、jQuery が null を検出していました (理由はわかりません)。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>

三番：

フォーム全体を更新することはできません (javascript で追加した css クラスが消去されていました)... 本当に重要なもの (この場合はチェックボックスとコマンド ボタン) だけを更新する必要があります。

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

第4：

commandButton がレンダリングされませんでした。ajax 応答で更新されますが、ブラウザーには表示されませんでした。この回答を見つけbtnRevogaNuke、カプセル化要素の id を移動しました:

<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>
于 2012-12-06T13:45:27.817 に答える