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

我的项目中有一个

datatable

，它具有

editable

属性

true

，并使用

rowdeditor

编辑其中的值。所以我把一个按钮放在

delete

这个值上，我认为当用户开始编辑一行时，应该阻止delete按钮。我正在使用Jquery函数来实现这一点。但是我有一个问题，当值由

JavaServerFaces

验证时，删除按钮被启用。所以我不知道最好的方法

数据表代码

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

---

那么我能做什么呢？

您可以使用

p:commandButton

的客户端API函数从Javascript中启用禁用按钮

例如：

<p:commandButton widgetVar="myCmdBtn"/>

要从Javascript启用，请使用：

myCmdBtn.disable();

myCmdBtn.enable();

我做完了

首先，我创建了两种方法来启用和禁用这些按钮

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

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

因此，通过上面的代码，我获得了所有带有

id

部分匹配

tabelaVigenciaCorrente

的按钮，并添加类

jqueryui

，以使

禁用成为可能。第二种方法是删除这个类

<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验证
是否抛出
。因为按钮可以解锁

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

谢谢
我发现了一个问题，我将
widgetVar
放在我的
commandButton
中，但我有两行，如果我尝试编辑第一行，删除按钮不会阻止，但第二行阻止与您的建议一起工作。如果我的字段没有通过jsf验证，请删除按钮enable。我输入了这个代码，但没有起作用<代码>

我明白了。由于datatable类似于

ui:repeat

，因此有许多按钮，但wigetwar是一个单独的功能。我很快会给你回电，告诉你其他可行的解决办法。

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