簡體   English   中英

添加鏈接以在JSF / Primefaces selectonemenu中動態插入元素

[英]Add link to dynamically insert an element in JSF/Primefaces selectonemenu

是否可以將項目動態插入到選擇的一個菜單中:

在此輸入圖像描述

目前,用戶必須轉到另一個可以添加作業的頁面:

在此輸入圖像描述

然后導航回第一個視圖,以使用新添加的選擇項查看更新的下拉菜單。 更有效的選擇是允許用戶在此視圖中直接插入,然后在下拉列表中選擇它。

這可以通過提供虛擬選擇項並在ajax更改偵聽器中顯式檢查它來實現。 選擇后,只需顯示對話框。 保存對話框后,保存新作業並重置虛擬選擇項。

這是一個啟動的例子。

@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>

在此輸入圖像描述

在此輸入圖像描述

在此輸入圖像描述

在此輸入圖像描述

在此輸入圖像描述

您可以嘗試為新項目添加字段。 它將如下所示:

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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM