带有“添加/编辑/删除”对话框的JSF DataTable

时间:2014-05-16 15:59:47

标签: jsf primefaces datatable modal-dialog panel

我遇到了JSF / Primefaces的麻烦。我在页脚中有数据表和保存按钮。主要的麻烦是我基本上不知道应该使用什么元素。

我想创建新对象,并且(当然)调用@ ManagedBean的方法(将其持久保存到db)并渲染DataTable。这种模式应该是超常用的。

这是我的代码,Primefaces没有看到/调用actionListener' Save' btn里面的对话框。请帮帮我。

 <?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://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<h:head>
    <title>Group List</title>
</h:head>
<h:body>
    <p:layout id="layout" fullPage="true">
        <p:layoutUnit id="layoutCenter" position="center">
            <h:form id="form" prependId="false">
                <p:dataTable var="group" value="#{groupBean.groupList}"
                    rowKey="#{group.id}" selection="#{groupBean.selectedGroup}"
                    selectionMode="single">

                    <p:column headerText="Id" sortBy="id" filterBy="#{group.id}"
                        filterMatchMode="contains">
                        <h:outputText value="#{group.id}" />
                    </p:column>
                    <f:facet name="footer">
                        <p:commandButton id="viewButton" value="View"
                            update=":form:dialogForm:display" icon="ui-icon-search"
                            oncomplete="PF('groupDialog').show()" />
                    </f:facet>
                </p:dataTable>

                <p:dialog id="dialog" widgetVar="groupDialog" resizable="false" modal="true" appendTo="@(body)"
                    width="200" showEffect="clip" hideEffect="fold">
                    <h:form id="dialogForm" prependId="false">
                        <h:panelGrid id="display" columns="2" cellpadding="4">
                            <h:outputText value="Id:" />
                            <h:outputText value="#{groupBean.selectedGroup.id}" />
                        </h:panelGrid>
                        <p:commandButton id="saveButton" value="Save" actionListener="#{groupBean.saveSelectedGroup}"
                            icon="ui-icon-search" />
                    </h:form>
                </p:dialog>

            </h:form>
            <h:form>

            </h:form>
        </p:layoutUnit>

        <p:layoutUnit id="layoutWest" position="west" size="220">
        </p:layoutUnit>
    </p:layout>
</h:body>
</html>

我肯定遗漏了一些东西而且我是完全合格的新手,所以请帮助我理解如何构建这组元素的正确规则。

@ManagedBean(name="groupBean")
@ViewScoped
public class GroupBean implements Serializable{

    private static final long serialVersionUID = 4554358331810255884L;

    @ManagedProperty(value="#{groupService}")
    IGroupService groupService;

    private List<Group> groupList;

    private Group selectedGroup;

    /*GETTERS-SETTERS AREA*/

    public List<Group> getGroupList() {
        return this.groupList;
    }

    public IGroupService getGroupService() {
        return groupService;
    }

    public void setGroupService(IGroupService groupService) {
        this.groupService = groupService;
    }

    public void setGroupList(List<Group> groupList) {
        this.groupList = groupList;
    }

    public Group getSelectedGroup() {
        return selectedGroup;
    }

    public void setSelectedGroup(Group selectedGroup) {
        this.selectedGroup = selectedGroup;
    }

    /*METHODS AREA*/

    public void saveSelectedGroup(){
        groupService.saveGroup(selectedGroup);
    }

    @PostConstruct
    public void init(){
        this.groupList = groupService.getGroups(null);
    }
}

如果我在对话框中删除表单 - 方法被调用但没有选择......

1 个答案:

答案 0 :(得分:1)

嵌套<form>元素在HTML中无效。此代码应该可以解决您的问题。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<h:head>
    <title>Group List</title>
</h:head>
<h:body>
<p:layout id="layout" fullPage="true">
    <p:layoutUnit id="layoutCenter" position="center">
        <h:form id="form">
            <p:dataTable var="group" value="#{groupBean.groupList}" rowKey="#{group.id}" selection="#{groupBean.selectedGroup}" selectionMode="single">
                <p:column headerText="Id" sortBy="id" filterBy="#{group.id}" filterMatchMode="contains">
                    <h:outputText value="#{group.id}" />
                </p:column>
                <f:facet name="footer">
                    <p:commandButton id="viewButton" value="View" update=":form:display" icon="ui-icon-search" oncomplete="PF('groupDialog').show()" />
                </f:facet>
            </p:dataTable>
            <p:dialog id="dialog" widgetVar="groupDialog" resizable="false" modal="true" appendTo="@(body)" width="200" showEffect="clip" hideEffect="fold">
                <h:panelGrid id="display" columns="2" cellpadding="4">
                    <h:outputText value="Id:" />
                    <h:outputText value="#{groupBean.selectedGroup.id}" />
                </h:panelGrid>
                <p:commandButton id="saveButton" value="Save" actionListener="#{groupBean.saveSelectedGroup}" icon="ui-icon-search" />
            </p:dialog>
        </h:form>
    </p:layoutUnit>
    <p:layoutUnit id="layoutWest" position="west" size="220">
    </p:layoutUnit>
</p:layout>

这个例子fine