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

Question

我的项目中有一个datatable，它具有editable 属性true，它使用rowEditor 来编辑里面的值。所以我在delete这个值上放了一个按钮，当用户开始编辑一行时，我想阻止删除按钮。我正在使用 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();

Answer 2

我做完了！

首先我为enable 和disable 这些按钮创建了两个方法。

function disableBtnCorrenteExcluir() {
    $('button[id*="tabelaVigenciaCorrente"]').prop('disabled', true).addClass('ui-state-disabled');
}

function enableBtnCorrenteExcluir() {
    $('button[id*="tabelaVigenciaCorrente"]').removeClass('ui-state-disabled');
}

所以我用上面的这些代码得到了所有带有id 部分匹配tabelaVigenciaCorrente 的按钮并添加类Jquery Ui 以使disable 成为可能。第二种方法我删除了这个类。

<p:ajax event="rowEditInit" onstart="disableBtnCorrenteExcluir();" />
<p:ajax event="rowEdit" oncomplete="if (args.validationFailed) disableBtnCorrenteExcluir(); else enableBtnCorrenteExcluir();" />
<p:ajax event="rowEditCancel" oncomplete="enableBtnCorrenteExcluir();" />

我将这些方法称为上述方法。如果rowEdit 我需要检查JSF validation throws。因为按钮可以解锁。

在我的代码中，我使用 datatable 可编辑 cellEditor。

谢谢