JSF primefaces- ajax 删除过滤后调用两次

Question

我们有使用 wildfly 的应用程序和 ui 使用 jsf primafaces 版本 6.2 当我使用以下场景测试应用程序时，primafaces- 调用 ajax 两次

类型按名称过滤 filter by name

<h:form id="accountForm">
    <p:dataTable scrollable="true" value="#{accountViewController.accountReportTable}" lazy="true" var="balance" rows="20"
                 paginator="true" paginatorPosition="#{web.tablePaginatorPosition}">
        <p:column style="width:16px">
            <p:rowToggler />
        </p:column>
        <p:column headerText="Account Number" sortBy="#{balance.accountId}" filterBy="#{balance.accountId}">
            <h:outputText value="#{balance.accountId}" />
        </p:column>
        <p:column headerText="Account Name" sortBy="#{balance.name}" filterBy="#{balance.name}">
            <h:outputText value="#{balance.name}" />
        </p:column>
        <p:column headerText="Account Balance" sortBy="#{balance.balance}">
            <h:outputText value="#{balance.balance}" styleClass="align-right">
                <f:convertNumber pattern="#{web.decimalFormatCcy}" locale="#{web.locale}" />
            </h:outputText>
        </p:column>
        <p:column headerText="Account Type" sortBy="#{balance.accountTypeName}" filterBy="#{balance.accountTypeName}">
            <h:outputText value="#{balance.accountTypeName}" />
        </p:column>
        <p:column headerText="Group ID" sortBy="#{balance.accountGroupId}" filterBy="#{balance.accountGroupId}">
            <h:outputText value="#{balance.accountGroupId}" />
        </p:column>
        <p:column headerText="Status" sortBy="#{balance.accountStatus}" filterBy="#{balance.accountStatus}"
                  filterOptions="#{accountStatusSelect.accountStatusList}">
            <h:outputText value="#{balance.accountStatus}" />
        </p:column>
        <p:rowExpansion>
            <p:panelGrid columns="3" columnClasses="table-detail-label,table-detail-separator,table-detail-value" 
                         styleClass="table-detail" layout="grid">
                <h:outputText value="Group Name" />
                <h:outputText value=":" />
                <h:outputText value="#{balance.accountGroupName}" />

                <h:outputText value="Registration Time" />
                <h:outputText value=":" />
                <h:outputText value="#{balance.registrationTimestamp}">
                    <f:convertDateTime pattern="#{web.timestampOutputFormat}" locale="#{web.locale}"
                                       timeZone="#{web.timeZone}" />
                </h:outputText>

                <h:outputText value="CoA Type" />
                <h:outputText value=":" />
                <h:outputText value="#{balance.coaType}" />

                <h:outputText value="Bank Name" />
                <h:outputText value=":" />
                <h:outputText value="#{balance.bankName}" />

                <h:outputText value="Bank Account" />
                <h:outputText value=":" />
                <h:outputText value="#{balance.bankAccount}" />
            </p:panelGrid>
        </p:rowExpansion>
    </p:dataTable>
    <p:commandButton value="Download"
                     style="float: right;margin-top: 20px;"
                     update=":downloadDialogForm"
                     onclick="PF('downloadDialog').show();"/>
</h:form>

在数据表中显示结果
从输入文本中删除过滤 block word and delete
重新加载dataTable中的数据并调用ajax两次

after delete, call ajax twice

如何在删除过滤后禁用调用 ajax 两次？

Answer 1

如何解决此行为。（调用 ajax 两次）

我检查了这个问题是如何在 primefaces 上解决的 github(https://github.com/primefaces/primefaces/commit/28d558539f323c342396bbf26af0d93a87c2c146?diff=unified)
我用这段代码覆盖默认方法（将代码放在主模板中）

 <script type="text/javascript">
        $(document).ready(function() {
            PrimeFaces.widget.DataTable.prototype.bindFilterEvent = function(filter) {
                var $this = this;
                //prevent form submit on enter key
                filter.on('keydown.dataTable-blockenter', function(e) {
                    var key = e.which,
                    keyCode = $.ui.keyCode;
                    if((key === keyCode.ENTER||key === keyCode.NUMPAD_ENTER)) {
                        e.preventDefault();
                    }
                })
                .on(this.cfg.filterEvent + '.dataTable', function(e) {
                    var key = e.which,
                    keyCode = $.ui.keyCode,
                    ignoredKeys = [keyCode.END, keyCode.HOME, keyCode.LEFT, keyCode.RIGHT, keyCode.UP, keyCode.DOWN,
                        keyCode.TAB, 16/*Shift*/, 17/*Ctrl*/, 18/*Alt*/, 91, 92, 93/*left/right Win/Cmd*/,
                        keyCode.ESCAPE, keyCode.PAGE_UP, keyCode.PAGE_DOWN,
                        19/*pause/break*/, 20/*caps lock*/, 44/*print screen*/, 144/*num lock*/, 145/*scroll lock*/];
                    if (ignoredKeys.indexOf(key) > -1) {
                        return;
                    }
                    if($this.filterTimeout) {
                        clearTimeout($this.filterTimeout);
                    }
                    $this.filterTimeout = setTimeout(function() {
                        $this.filter();
                        $this.filterTimeout = null;
                    },
                    $this.cfg.filterDelay);
                });

                // #89 IE clear "x" button
                if (PrimeFaces.env.isIE()) {
                    filter.on('mouseup.dataTable', function(e) {
                        var input = $(this),
                        oldValue = input.val();

                        if(oldValue == "") {
                            return;
                        }

                        setTimeout(function() {
                            var newValue = input.val();
                            if(newValue == "") {
                                $this.filter();
                            }
                        }, 1);
                    }); 
                }
            }
        })
    </script>

希望对其他人有所帮助

JSF primefaces- ajax 删除过滤后调用两次

JSF primafaces- ajax call twice after delete filtering

ajax

jsf

primefaces