Question

我正在使用Primefaces 5.0。我有一个带有ajax监听器的selectOneMenu：

<p:selectOneMenu value="#{mybean.myselection}" >
    <f:selectItems value="#{mybean.mylist}" />
    <p:ajax listener="#{mybean.test}" />
</p:selectOneMenu>

每次更改值时都会调用侦听器。这很好用。但我还需要一个像“选择”或“点击”这样的事件，当点击选定项目时也会触发一个动作。

我在PF UserGuide中找不到活动。有一个简单的方法吗？

编辑：添加Javascript功能。

   <h:form>
    <p:selectOneMenu value="#{mybean.myselection}" widgetVar="mySelect">
        <f:selectItems value="#{mybean.mylist}" />
        <p:ajax listener="#{mybean.test}" />
    </p:selectOneMenu>
   <h:form>

<script>
            //<![CDATA[
            $(document)
                    .ready(
                            function() {
                                PF('mySelect').selectItem = function(item,
                                        silent) {
                                    var selectedOption = this.options.eq(this
                                            .resolveItemIndex(item)), currentOption = this.options
                                            .filter(':selected'), shouldChange = null;

                                    if (this.cfg.editable) {
                                        shouldChange = (selectedOption.text() != this.label
                                                .val());
                                    } else {
                                        shouldChange = true;
                                    }

                                    if (shouldChange) {
                                        this.highlightItem(item);
                                        this.input.val(selectedOption.val())

                                        this.triggerChange();

                                        if (this.cfg.editable) {
                                            this.customInput = false;
                                        }
                                    }

                                    if (!silent) {
                                        this.focusInput.focus();
                                    }

                                    if (this.panel.is(':visible')) {
                                        this.hide();
                                    }
                                }
                            })
            //]]>
        </script>

Answer 1

在selectItem窗口小部件的selectOneMenu函数中，您可以看到，当选择项目时，会出现sameOption条件，如果条件为真，则更改事件不会被触发。

所以这是设计的。要覆盖此选项，您有多个选项，您可以更改selectItem的原型，sameOption始终被视为false，这意味着您不必删除所有代码与该选项相关的只是为了简单地倒退，或者你可以永远拿出那个选项！

这个例子是我从等式中找出该选项的地方......

PrimeFaces.widget.SelectOneMenu.prototype.selectItem = function(item, silent) {
    var selectedOption = this.options.eq(this.resolveItemIndex(item)),
    //sameOption = selectedOption.val() == currentOption.val() | or make it false |
    currentOption = this.options.filter(':selected'),
    shouldChange = null;

    if(this.cfg.editable) {
        shouldChange = (selectedOption.text() != this.label.val()); //changes done here, see original function 
    }
    else {
        shouldChange = true;
    }

    if(shouldChange) {
        this.highlightItem(item);
        this.input.val(selectedOption.val())

        this.triggerChange();

        if(this.cfg.editable) {
            this.customInput = false;
        }
    }

    if(!silent) {
        this.focusInput.focus();
    }

    if(this.panel.is(':visible')) {
        this.hide();
    }
}

现在改变整个对象的原型可能不是你的情况，如果你想要特定的selectOneMenu的这种行为，你可能只改变这样的函数：

PF('selectOneMenuWidgetVarName').selectItem = function(item, silent) {
    var selectedOption = this.options.eq(this.resolveItemIndex(item)),
    currentOption = this.options.filter(':selected'),
    shouldChange = null;

    if(this.cfg.editable) {
        shouldChange = (selectedOption.text() != this.label.val());
    }
    else {
        shouldChange = true;
    }

    if(shouldChange) {
        this.highlightItem(item);
        this.input.val(selectedOption.val())

        this.triggerChange();

        if(this.cfg.editable) {
            this.customInput = false;
        }
    }

    if(!silent) {
        this.focusInput.focus();
    }

    if(this.panel.is(':visible')) {
        this.hide();
    }
}

这样即使选择了相同的值，也会触发更改事件。您需要在$(document).ready。

中执行此代码

在选择/单击时选择selectOneMenu ajax事件

1 个答案: