javascript - Primefaces SelectManyMenu 带过滤器 : How to select all displayed Items with JS

Question

我有 SelectManyMenu (primeFaces 6.1) 和“全选”和“取消全选”按钮，用于选择/取消选择选择列表中的所有项目。我使用过滤器修改了 SelectManyMenu，但我的“全选”按钮仍然依赖在java选择方法上，这意味着未过滤(完整)选择列表的所有项目都显示为选中，即使用户在单击“全选”之前过滤了选择列表。
有没有办法选择客户端 SelectmanyMenu 中所有显示的(过滤或未过滤)项目？ 我尝试制作一个“选择过滤列表上的所有项目”按钮，该按钮有条件地呈现(如果用户在过滤器框中键入)，但我找不到任何可以用来创建基于过滤器的操作的事件。

xhtml 文件:

     <h:panelGroup id="param-type-3-cell-2" layout="block">
                    <p:selectManyMenu id="selectManyMenu" 
                                      rendered="#{parameter.multiValue}"
                                      value="#{parameter.selectionList.selectionLabelListString}"
                                      disabled="#{parameter.ruleParam.option ne 'OPTION_DEFAULT' or parameter.readonly or not parameter.fullyLoaded}"
                                      label="#{parameter.selectedLabel}"
                                      style="width:#{parameter.selectionList.listWidth}px;"
                                      styleClass="sb-input-small" scrollHeight="#{parameter.selectionList.listStyleHeightMaxInt}"
                                      filter="#{parameter.listBoxFilter}" filterMatchMode="#{parameter.listBoxFilterMode}">
                        <f:selectItems value="#{parameter.selectionList.selectionList}" 
                                       var="selitem" 
                                       itemValue="#{selitem.label}" 
                                       itemLabel="#{selitem.label}" />
                        <!-- AJAX if this param acts as a trigger for other params -->
                        <p:ajax event="change"
                                listener="#{myController.handleParameters(parameter)}"
                                oncomplete="parameterChangeAction()"
                                disabled="#{empty parameter.listOfTriggeredParameters}"/>

                    </p:selectManyMenu>

                    <h:panelGroup layout="block">
                        <h:outputText id="numberOfValues"
                                      value="#{msg.param_show_entries} #{parameter.selectionList.numberOfSelectedValues}"
                                      style="#{parameter.readonly or not parameter.fullyLoaded ? 'opacity: 0.3;' : ''}"/>
                    </h:panelGroup>

                    <h:panelGroup layout="block" styleClass="paramButtonPanel">
                        <p:commandButton rendered="#{parameter.multiValue}"
                                         disabled="#{parameter.readonly or not parameter.fullyLoaded}"
                                         styleClass="rich-button-submit inline-block" 
                                         value="#{msg.param_button_all}"
                                         oncomplete="parameterChangeAction()"
                                         process="@this"
                                         widgetVar="BtnSaveAll"
                                         id="selectAllBtn"
                                         action="#{parameter.selectionList.selectAll}"
                                         title="#{msg.param_button_allhint}" >
                            <!-- AJAX if this param acts as a trigger for other params -->
                            <p:ajax event="click"
                                    listener="#{myController.handleParameters(parameter)}"
                                    disabled="#{empty parameter.listOfTriggeredParameters}"/>
                        </p:commandButton>

                        <p:commandButton rendered="#{parameter.multiValue}"
                                         disabled="#{parameter.readonly or not parameter.fullyLoaded}"
                                         styleClass="rich-button-submit inline-block" 
                                         style="margin-left: 5px;"
                                         value="#{msg.param_button_nothing}"
                                         oncomplete="parameterChangeAction()"
                                         id="deselectAllBtn"
                                         process="@this"
                                         action="#{parameter.selectionList.deselectAll}"
                                         title="#{msg.param_button_nothinghint}" >
                            <p:ajax event="click"
                                    listener="#{myController.handleParameters(parameter)}"
                                    disabled="#{empty parameter.listOfTriggeredParameters}"/>
                        </p:commandButton>
                    </h:panelGroup>
                </h:panelGroup>

参数对象:

    /**
     *
     * @return
     */
    public BirdSelectionList getSelectionList()
    {
        return selectionList;
    }

    /**
     *
     * @param selectionList
     */
    public void setSelectionList(MySelectionList selectionList)
    {
        this.selectionList = selectionList;
    }

MySelectionList 对象:

    public void selectAll()
    {
        selectionListString = new ArrayList<>();
        for (MySelectItem selectItem : selectionList)
        {
            selectionListString.add(selectItem.getValue());
        }
    }
    public void deselectAll()
    {
        this.selectionListString = new ArrayList<>();
    }

有人知道如何做到这一点吗？

P.S:我使用 PrimeFaces 6.1

Answer 1

您可以将 JavaScript 方法添加到 SelectManyMenu 小部件中，仅选择可见项目:

PrimeFaces.widget.SelectManyMenu.prototype.selectVisible =  function() {
        for(var i = 0; i < this.items.length; i++) {
            var item = this.items.eq(i);
            if(item.is(':visible')) {
                this.selectItem(item);
            } else {
                this.unselectItem(item);
            }
        }
    };

然后在您的按钮上只需触发 PF('yourSelectManyMenuWidgetVar').selectVisible()。

该代码借用并修改自selectAll method 。确保上述修改是在 primefaces 脚本之后加载的。

还要确保提出功能请求，例如 isse 2895致 primefaces 团队 - 在最佳情况下通过拉取请求进行丰富。