jquery - 在使用 rowEditor 的 Primefaces 中禁用数据表中的删除按钮

Question

我的元素中有一个 datatable 具有 editable 属性 true 并且它使用 rowEditor 来编辑值里面。所以我放了一个按钮来删除这个值，我想当用户开始编辑一行时阻止删除按钮。我使用 Jquery 函数来做这个。但是我遇到了一个问题，当值被 Java Server Faces 验证时，删除按钮被启用。所以我不知道最好的方法。

数据表代码

<p:dataTable id="tabelaVigenciaCorrente" editable="true"
    value="#{tabelaTaxaBean.pojo.vigenciaCorrente.faixas}"
    emptyMessage="Adicione pelo menos uma faixa" var="corrente" 
    sortBy="prazoMinimo">

    <p:ajax event="rowEditInit" oncomplete="disableDataTableButtonExcluir();"/>
    <p:ajax event="rowEdit" update=":form:messages" oncomplete="enableDataTableButtonExcluir();"/>
    <p:ajax event="rowEditCancel" oncomplete="enableDataTableButtonExcluir();"/>

    <f:facet name="header">
        <div align="left">
            <p:outputLabel value="#{tabelaTaxaBean.cabecalhoVigenciaCorrente}" />
        </div>
    </f:facet>

    <p:column headerText="Prazo (em meses)" styleClass="columnRight">
        <p:cellEditor>
            <f:facet name="output">
                <p:outputLabel
                    value="#{corrente.prazoMinimo} a #{corrente.prazoMaximo}" />
            </f:facet>

            <f:facet name="input">
                <p:inputText label="Prazo inicial"
                    value="#{corrente.prazoMinimo}" size="8" maxlength="3"
                    onkeypress="mascara(this, soNumeros)" required="true" />
                &nbsp;&nbsp;
                <p:inputText label="Prazo final" value="#{corrente.prazoMaximo}"
                    size="8" maxlength="3" onkeypress="mascara(this, soNumeros)"
                    required="true" />
            </f:facet>
        </p:cellEditor>
    </p:column>

    <p:column headerText="Taxa de juros" styleClass="columnRight">
        <p:cellEditor>
            <f:facet name="output">
                <p:outputLabel value="#{corrente.taxaJuros}">
                    <f:convertNumber locale="pt_BR" minFractionDigits="2"
                        maxFractionDigits="2" />
                </p:outputLabel>
                <p:outputLabel value="%" />
            </f:facet>

            <f:facet name="input">
                <p:inputText label="Taxa de juros" value="#{corrente.taxaJuros}"
                    onkeypress="mascara(this,valorMonetario)" size="11"
                    maxlength="6" required="true">
                    <f:convertNumber locale="pt_BR" minFractionDigits="2"
                        maxFractionDigits="2" />
                </p:inputText>
            </f:facet>
        </p:cellEditor>
    </p:column>

    <p:column headerText="Taxa diferenciada para o banco/empresa" styleClass="columnRight">
        <p:cellEditor>
            <f:facet name="output">
                <p:outputLabel value="#{corrente.taxaDiferenciadaParaBanco}">
                    <f:convertNumber locale="pt_BR" minFractionDigits="2"
                        maxFractionDigits="2" />
                </p:outputLabel>
                <p:outputLabel
                    value="#{corrente.taxaDiferenciadaParaBanco == null ? '' : '%'}" />
            </f:facet>

            <f:facet name="input">
                <p:inputText label="Taxa diferenciada para o banco/empresa"
                    value="#{corrente.taxaDiferenciadaParaBanco}"
                    onkeypress="mascara(this,valorMonetario)" size="11"
                    maxlength="6">
                    <f:convertNumber locale="pt_BR" minFractionDigits="2"
                        maxFractionDigits="2" />
                </p:inputText>
            </f:facet>
        </p:cellEditor>
    </p:column>

    <p:column headerText="Comissão" styleClass="columnRight">
        <p:cellEditor>
            <f:facet name="output">
                <p:outputLabel value="#{corrente.comissao}">
                    <f:convertNumber locale="pt_BR" minFractionDigits="2"
                        maxFractionDigits="2" />
                </p:outputLabel>

                <p:outputLabel value="%" />
            </f:facet>

            <f:facet name="input">
                <p:inputText label="Comissão" value="#{corrente.comissao}"
                    onkeypress="mascara(this,valorMonetario)" size="11"
                    maxlength="6" required="true">
                    <f:convertNumber locale="pt_BR" minFractionDigits="2"
                        maxFractionDigits="2" />
                </p:inputText>
            </f:facet>
        </p:cellEditor>
    </p:column>

    <p:column headerText="Complemento" styleClass="columnRight">
        <p:cellEditor>
            <f:facet name="output">
                <p:outputLabel value="#{corrente.complementoComissao}">
                    <f:convertNumber locale="pt_BR" minFractionDigits="2"
                        maxFractionDigits="2" />
                </p:outputLabel>

                <p:outputLabel
                    value="#{corrente.complementoComissao == null ? '' : '%'}" />
            </f:facet>

            <f:facet name="input">
                <p:inputText label="Complemento"
                    value="#{corrente.complementoComissao}"
                    onkeypress="mascara(this,valorMonetario)" size="11"
                    maxlength="6">
                    <f:convertNumber locale="pt_BR" minFractionDigits="2"
                        maxFractionDigits="2" />
                </p:inputText>
            </f:facet>
        </p:cellEditor>
    </p:column>

    <p:column headerText="Ação" styleClass="coluna-acao">
        <p:rowEditor/>
        &nbsp;
        <p:commandButton id="btnExcluirFaixaCorrente" process="@this" disabled="false"
            styleClass="botaoImagem" icon="botaoExcluir" title="Excluir"
            oncomplete="confirmationFaixaExclusao.show()">
            <f:setPropertyActionListener
                target="#{tabelaTaxaBean.vigenciaTipo}" value="corrente" />
            <f:setPropertyActionListener target="#{tabelaTaxaBean.faixa}"
                value="#{corrente}" />
        </p:commandButton>
    </p:column>

    <f:facet name="footer">
        <div align="right">
            <p:commandButton
                disabled="#{tabelaTaxaBean.pojo.vigenciaCorrente == null}"
                process="@this" value="Adicionar faixa"
                update=":dialogAdicionarFaixa" oncomplete="dlgFaixa.show();"
                action="#{tabelaTaxaBean.criarFaixa}" >
                <f:setPropertyActionListener
                    target="#{tabelaTaxaBean.vigenciaTipo}" value="corrente" />
            </p:commandButton>
            &nbsp;&nbsp;
            <p:commandButton process="@this" update=":dialogVigencia"
                oncomplete="dlgVigencia.show()" value="Editar vigência"
                action="#{tabelaTaxaBean.editarVigencia}"
                disabled="#{(tabelaTaxaBean.pojo.vigenciaCorrente == null) || (tabelaTaxaBean.pojo.vigenciaProxima != null)}" >
                <f:setPropertyActionListener
                    target="#{tabelaTaxaBean.vigenciaTipo}" value="corrente" />
            </p:commandButton>
            &nbsp;&nbsp;
            <p:commandButton process="@this" update=":dialogVigencia"
                oncomplete="confirmationVigenciaExclusao.show()"
                value="Excluir vigência"
                disabled="#{(tabelaTaxaBean.pojo.vigenciaCorrente == null) || (tabelaTaxaBean.pojo.vigenciaProxima != null)}">
                <f:setPropertyActionListener
                    target="#{tabelaTaxaBean.vigenciaTipo}" value="corrente" />
            </p:commandButton>
        </div>
    </f:facet>
</p:dataTable>

我的职能

  function disableDataTableButtonExcluir() {
      if ($('span.ui-icon.ui-icon-pencil').is(':hidden')) {
          $('span.ui-button-icon-left.ui-icon.ui-c.botaoExcluir').prop("disabled", true).addClass('ui-state-disabled');     
      }
  }

  function enableDataTableButtonExcluir() {

      if ($('tr.ui-widget-content.ui-row-editing.ui-state-error.ui-datatable-even').length == 0) {            
          if (!$('span.ui-icon.ui-icon-pencil').is(':hidden')) {
              $('button[id*="btnExcluirFaixa"]').removeAttr("disabled").removeClass('ui-state-disabled');;      
          }
      }
  }

那我该怎么办呢？

Answer 1

您可以使用 p:commandButton 的客户端 API 函数从 Javascript 启用禁用按钮。

例子:

<p:commandButton widgetVar="myCmdBtn"/>

禁用 Javascript 使用:

myCmdBtn.disable();

要从 Javascript 启用，请使用:

myCmdBtn.enable();