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 { 背景： url('') 红色 !important;}

第二：

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

第三：

更新整个表单是一个禁忌（您使用 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>

第四：

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