Primefaces SelectManyMenu with Filter:如何使用JS选择所有显示的项目



我有SelectManyMenu(primeFaces 6.1(以及"全选"one_answers"全选"按钮,可以选择/取消选择选择列表中的所有项目。我用过滤器修改了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<>();
}

有人知道怎么做吗?

第页。S:我使用PrimeFaces 6.1

您可以向SelectManyMenu小部件添加一个javascript方法,只选择可见项目:

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方法中借用和修改的。请确保在素数面脚本之后加载上述修改。

还要确保向primefaces团队提出一个像isse 2895这样的功能请求——在最好的情况下,用拉请求来丰富。

最新更新