时间戳

首页 > 解决方案 > p:selectManyMenu(with checkbox)：同时添加item和select checkbox

jsf - p:selectManyMenu(with checkbox)：同时添加item和select checkbox

问题描述

xhtml代码

<p:selectManyMenu id="menuid"
                value="#{bean.selectedActivities}"
                showCheckbox="true" scrollable="true" scrollHeight="150">
                <f:selectItems value="#{bean.activities}" var="activity" itemValue="#{activity}"
                               itemLabel="#{activity}" />               
</p:selectManyMenu>
<p:commandButton value="ADD ACTIVITY" id="addId">
    <p:ajax event="click" process="@this" update="menuid" listener="#{bean.addActivity()}"/>
</p:commandButton>

豆：

private List<String> selectedActivities = new ArrayList<>();
private List<String> activities = new ArrayList<>();
int index = 1;
public void addActivity(){
  String activity = "Activity "+ (index ++);
  activities.add(activity);
  selectedActivities.add(activity);
}

此代码正在向 manyMenu 添加新项目，但未选中复选框。

标签： jsfprimefaces

解决方案

除了一些缺失的注释，我看不出有什么错误。无论如何，这是一个基于您的代码的经过测试的解决方案，应该可以工作。首先让我们定义视图。这与您的示例基本相同：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>SelectMany Example</title>
    </h:head>
    <h:body>
        <h:form>
            <p:selectManyMenu id="menuid"
                      value="#{selectManyBackingBean.selectedActivities}"
                      showCheckbox="true" scrollable="true" scrollHeight="150">
                <f:selectItems value="#{selectManyBackingBean.activities}" var="activity" itemValue="#{activity}"
                           itemLabel="#{activity}" />               
            </p:selectManyMenu>
            <p:commandButton value="ADD ACTIVITY" id="addId">
                <p:ajax event="click" process="@form" update="menuid"
                    listener="#{selectManyBackingBean.onAddActivity}"/>
            </p:commandButton>
        </h:form>
    </h:body>
</html>

然后，我们定义支持 bean：

@Data
@Named
@ViewScoped
public class SelectManyBackingBean implements Serializable {
    private List<String> selectedActivities;
    private List<String> activities;
    private int index;

    @PostConstruct
    private void init() {
        activities =  new ArrayList<>();
        selectedActivities = new ArrayList<>();
        index = 0;
    }

    public void onAddActivity(){
        String activity = "Activity " + (index++);
        activities.add(activity);
        selectedActivities.add(activity);
    }
}

这应该会给你预期的行为。现在，在“添加活动”按钮上单击 3 次会产生以下结果：

在此处输入图像描述

process="@this"注意命令按钮从到的细微变化process="@form"。这将确保您在组件中所做的任何更改也包含在表单提交中。如果你保持它的原始值，任何点击菜单中的复选框都不会被保留，并且当你按下命令按钮时会将条目重置为之前的值（这是因为有问题的组件在生命周期中不包括在内）循环执行）。

推荐阅读