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

问题描述 投票：1回答：2

我的项目中有一个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');;      
          }
      }
  }

那我该怎么办？

jquery css jsf primefaces
2个回答
1
投票

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

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS91NWh4NC5wbmcifQ==” alt =“在此处输入图像描述”>

示例：

<p:commandButton widgetVar="myCmdBtn"/>

要禁用Java语言使用：

myCmdBtn.disable();

要从Java语言启用，请使用：

myCmdBtn.enable();
0
投票

我完成了！

首先，我为这两个按钮创建了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。

谢谢

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.