添加 link 以在 JSF/Primefaces selectonemenu 中动态插入一个元素
Add link to dynamically insert an element in JSF/Primefaces selectonemenu
是否可以将项目动态插入 select 一个菜单中:
目前用户必须转到另一个页面才能添加工作:
然后导航回第一个视图,查看更新后的下拉列表以及新添加的 select 项目。一个更有效的选择是允许用户在此视图中即时插入,然后在下拉列表中 select。
您可以尝试为您的新项目添加字段。它将如下所示:
bean 代码:
private Job newJob;
private Job addesJob;
public Job getNewJob() {
return newJob;
}
public void setNewJob(Job newJob) {
this.newJob = newJob;
}
public Job getAddedJob() {
return addedJob;
}
public void setAddedJob(Job addedJob) {
this.addedJob = addedJob;
}
public void needCreateJob() {
if (addedJob.equals(newJob)) {
RequestContext.getCurrentInstance().execute("PF('jobCreationDlgVar')
.show()");
}
}
查看代码:
<p:selectOneMenu value="#{bean.addedJob}">
<f:selectItem value="#bean.newJob}"/>
<p:ajax event="change" listener="#{bean.needCreateJob()}" process="@this"/>
<f:selectItem value="#{bean.jobs}" var="job" itemLabel="#{job.name}" itemValue="#{job}"/>
</p:selectOneMenu>
这可以通过提供虚拟 select 项目并在 ajax 更改侦听器中明确检查它来实现。 select编辑后,只需显示对话框。保存对话框后,保存新作业并重置虚拟 select 项。
这是一个启动示例。
@Named
@ViewScoped
public class Bean implements Serializable {
private List<Activity> activities;
private List<Job> jobs;
private Job newJob;
@EJB
private YourActivityService yourActivityService;
@EJB
private YourJobService yourJobService;
@PostConstruct
public void init() {
activities = yourActivityService.list();
jobs = yourJobService.list();
newJob = new Job();
}
public void addNewJobIfNecessary(AjaxBehaviorEvent event) {
if (newJob.equals(((UIInput) event.getComponent()).getValue())) {
RequestContext ajax = RequestContext.getCurrentInstance();
ajax.update("addNewJobDialog");
ajax.execute("PF('widget_addNewJobDialog').show()");
}
}
public void saveNewJob() {
yourJobService.save(newJob);
jobs.add(newJob);
newJob = new Job();
RequestContext ajax = RequestContext.getCurrentInstance();
ajax.update("activitiesForm");
ajax.execute("PF('widget_addNewJobDialog').hide()");
}
// ...
}
<h:form id="activitiesForm">
<p:dataTable value="#{bean.activities}" var="activity">
<p:column>#{activity.id}</p:column>
<p:column>
<p:selectOneMenu value="#{activity.job}" converter="omnifaces.SelectItemsConverter">
<f:selectItem itemValue="#{null}" itemLabel="Select one" />
<f:selectItems value="#{bean.jobs}" />
<f:selectItem itemValue="#{bean.newJob}" itemLabel="Add new Job" />
<p:ajax listener="#{bean.addNewJobIfNecessary}" />
</p:selectOneMenu>
</p:column>
</p:dataTable>
</h:form>
<p:dialog id="addNewJobDialog">
<h:form>
<p:inputText value="#{bean.newJob.name}" required="true" />
<p:commandButton value="Add" action="#{bean.saveNewJob}" update="@form" />
<p:messages />
</h:form>
</p:dialog>
是否可以将项目动态插入 select 一个菜单中:
目前用户必须转到另一个页面才能添加工作:
然后导航回第一个视图,查看更新后的下拉列表以及新添加的 select 项目。一个更有效的选择是允许用户在此视图中即时插入,然后在下拉列表中 select。
您可以尝试为您的新项目添加字段。它将如下所示:
bean 代码:
private Job newJob;
private Job addesJob;
public Job getNewJob() {
return newJob;
}
public void setNewJob(Job newJob) {
this.newJob = newJob;
}
public Job getAddedJob() {
return addedJob;
}
public void setAddedJob(Job addedJob) {
this.addedJob = addedJob;
}
public void needCreateJob() {
if (addedJob.equals(newJob)) {
RequestContext.getCurrentInstance().execute("PF('jobCreationDlgVar')
.show()");
}
}
查看代码:
<p:selectOneMenu value="#{bean.addedJob}">
<f:selectItem value="#bean.newJob}"/>
<p:ajax event="change" listener="#{bean.needCreateJob()}" process="@this"/>
<f:selectItem value="#{bean.jobs}" var="job" itemLabel="#{job.name}" itemValue="#{job}"/>
</p:selectOneMenu>
这可以通过提供虚拟 select 项目并在 ajax 更改侦听器中明确检查它来实现。 select编辑后,只需显示对话框。保存对话框后,保存新作业并重置虚拟 select 项。
这是一个启动示例。
@Named
@ViewScoped
public class Bean implements Serializable {
private List<Activity> activities;
private List<Job> jobs;
private Job newJob;
@EJB
private YourActivityService yourActivityService;
@EJB
private YourJobService yourJobService;
@PostConstruct
public void init() {
activities = yourActivityService.list();
jobs = yourJobService.list();
newJob = new Job();
}
public void addNewJobIfNecessary(AjaxBehaviorEvent event) {
if (newJob.equals(((UIInput) event.getComponent()).getValue())) {
RequestContext ajax = RequestContext.getCurrentInstance();
ajax.update("addNewJobDialog");
ajax.execute("PF('widget_addNewJobDialog').show()");
}
}
public void saveNewJob() {
yourJobService.save(newJob);
jobs.add(newJob);
newJob = new Job();
RequestContext ajax = RequestContext.getCurrentInstance();
ajax.update("activitiesForm");
ajax.execute("PF('widget_addNewJobDialog').hide()");
}
// ...
}
<h:form id="activitiesForm">
<p:dataTable value="#{bean.activities}" var="activity">
<p:column>#{activity.id}</p:column>
<p:column>
<p:selectOneMenu value="#{activity.job}" converter="omnifaces.SelectItemsConverter">
<f:selectItem itemValue="#{null}" itemLabel="Select one" />
<f:selectItems value="#{bean.jobs}" />
<f:selectItem itemValue="#{bean.newJob}" itemLabel="Add new Job" />
<p:ajax listener="#{bean.addNewJobIfNecessary}" />
</p:selectOneMenu>
</p:column>
</p:dataTable>
</h:form>
<p:dialog id="addNewJobDialog">
<h:form>
<p:inputText value="#{bean.newJob.name}" required="true" />
<p:commandButton value="Add" action="#{bean.saveNewJob}" update="@form" />
<p:messages />
</h:form>
</p:dialog>