當在p：datatable中沒有選擇任何行時，如何防止顯示p：dialog？

Question

我有jsf頁面，帶有p:datatble和控制按鈕，用於從表中添加/更新/刪除數據。 當用戶單擊按鈕時，將顯示p:dialog 。 這是我的users.xhtml ：

<h:form id="form">
                    <!-- Table for displayng users information -->
                    <p:dataTable id="users" var="user" value="#{usersBean.users}" selectionMode="single"
                                 selection="#{usersBean.selected}" rowKey="#{user.id}">
                        <!-- Controls -->
                        <f:facet name="header">
                            <p:commandButton id="addButton" value="New" oncomplete="addUser.show()"
                                             update=":form:newUser"/>
                            <p:commandButton id="updbutton" value="Update" oncomplete="updUser.show()"
                                             update=":form:updateUser" action="#{usersBean.constructUser}"/>
                            <p:commandButton id="delButton" value="Delete" oncomplete="delUser.show()"
                                             update=":form:delDialog"/>
                        </f:facet>
                        <p:column>
                            <f:facet name="header">
                                Login
                            </f:facet>
                            <h:outputText value="#{user.login}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                Password
                            </f:facet>
                            <h:outputText value="#{user.password}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                Name
                            </f:facet>
                            <h:outputText value="#{user.name}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                Surname
                            </f:facet>
                            <h:outputText value="#{user.surname}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                Role
                            </f:facet>
                            <h:outputText value="#{user.role}"/>
                        </p:column>
                        <f:facet name="footer">
                            <p:commandButton value="CVS" ajax="false">
                                <p:dataExporter target="users" type="csv" fileName="Users"/>
                            </p:commandButton>
                        </f:facet>
                    </p:dataTable>
                    <!-- Dialog for adding new User -->
                    <p:dialog id="addDialog" header="Add new user" widgetVar="addUser" resizable="false"
                              width="400" showEffect="clip" hideEffect="fold">
                        <h:panelGrid id="newUser" columns="2" cellpadding="4">
                            <p:outputLabel for="newLogin" value="Login :"/>
                            <p:inputText id="newLogin" value="#{usersBean.newUser.login}"/>
                            <p:outputLabel for="newPassword" value="Password :"/>
                            <p:inputText id="newPassword" value="#{usersBean.newUser.password}"/>
                            <p:outputLabel for="newName" value="Name :"/>
                            <p:inputText id="newName" value="#{usersBean.newUser.name}"/>
                            <p:outputLabel for="newSurname" value="Surname :"/>
                            <p:inputText id="newSurname" value="#{usersBean.newUser.surname}"/>
                            <p:outputLabel for="newRole" value="Role :"/>
                            <p:selectOneMenu id="newRole" value="#{usersBean.newUser.role}">
                                <f:selectItems value="#{usersBean.roles}"/>
                            </p:selectOneMenu>

                            <f:facet name="footer">
                                <p:commandButton value="Save" actionListener="#{usersBean.addUser}"
                                                 update=":form:users"
                                                 oncomplete="addUser.hide()"/>
                            </f:facet>
                        </h:panelGrid>
                    </p:dialog>
                    <!-- Dialog for deleting User -->
                    <p:confirmDialog id="delDialog" message="Are You sure to delete
                    #{usersBean.selected.name} user?" widgetVar="delUser" resizable="false"
                                     width="400" showEffect="clip" hideEffect="fold">
                        <p:commandButton id="confirm" value="Yes" action="#{usersBean.delete}"
                                         update=":form:users" onclick="delUser.hide()"/>
                        <p:commandButton id="declice" value="No" onclick="delUser.hide()"/>
                    </p:confirmDialog>
                    <!-- Dialog for updating User information -->
                    <p:dialog id="updDialog" header="Update user information" widgetVar="updUser"
                              resizable="false" width="400" showEffect="clip" hideEffect="fold">
                        <h:panelGrid id="updateUser" columns="2" cellpadding="4">
                            <p:outputLabel for="updLogin" value="Login :"/>
                            <p:inputText id="updLogin" value="#{usersBean.updated.login}"/>
                            <p:outputLabel for="updPassword" value="Password :"/>
                            <p:inputText id="updPassword" value="#{usersBean.updated.password}"/>
                            <p:outputLabel for="updName" value="Name :"/>
                            <p:inputText id="updName" value="#{usersBean.updated.name}"/>
                            <p:outputLabel for="updSurname" value="Surname :"/>
                            <p:inputText id="updSurname" value="#{usersBean.updated.surname}"/>
                            <p:outputLabel for="updRole" value="Role :"/>
                            <p:selectOneMenu id="updRole" value="#{usersBean.updated.role}">
                                <f:selectItems value="#{usersBean.roles}"/>
                            </p:selectOneMenu>

                            <f:facet name="footer">
                                <p:commandButton value="Update" action="#{usersBean.updUser}"
                                                 update=":form:users" onclick="updUser.hide()"/>
                            </f:facet>
                        </h:panelGrid>
                    </p:dialog>
                </h:form>

我的托管bean：

@ManagedBean(name = "usersBean")
@ViewScoped
public class UsersController {
    private List<String> roles;
    private UserDAO userDAO;
    private List<UserEnt> users;
    private UserEnt newUser;
    private UserEnt selected;
    private UserEnt updated;

    public UsersController() {
        userDAO = new UserDAO();
        newUser = new UserEnt();
        selected = new UserEnt();
        updated = new UserEnt();
    }

    public UserEnt getNewUser() {
        return newUser;
    }

    public void setNewUser(UserEnt newUser) {
        this.newUser = newUser;
    }

    public List<UserEnt> getUsers() {
        return users;
    }

    public void setUsers(List<UserEnt> users) {
        this.users = users;
    }

    public List<String> getRoles() {
        return roles;
    }

    public void setRoles(List<String> roles) {
        this.roles = roles;
    }

    public UserEnt getSelected() {
        return selected;
    }

    public void setSelected(UserEnt selected) {
        this.selected = selected;
    }

    public UserEnt getUpdated() {
        return updated;
    }

    public void setUpdated(UserEnt updated) {
        this.updated = updated;
    }

    @PostConstruct
    public void initData() {
        roles = new ArrayList<String>();
        roles.add("ROLE_USER");
        roles.add("ROLE_ADMIN");
        users = userDAO.getListOfUsers();
    }

    public void constructUser() {
        updated = selected;
    }

    public void addUser() {
        userDAO.saveNewUser(newUser);
        users = userDAO.getListOfUsers();
    }

    public void delete() {
        userDAO.deleteUser(selected);
        users = userDAO.getListOfUsers();
    }

    public void updUser() {
        userDAO.updateUser(updated);
        users = userDAO.getListOfUsers();
    }
}

當在p:datatable沒有選擇任何行時，如何防止顯示p:dialog ？

Answer 1

像這樣更改您的更新按鈕：

<p:commandButton id="updbutton" value="Update" oncomplete="handleRequest(xhr, status, args)"
                                             update=":form:updateUser" action="#{usersBean.constructUser}"/>

並添加腳本如下：

 <script type="text/javascript">  
        function handleRequest(xhr, status, args) {  
            if(!args.noUserSelected) {  
                updUser.show()

            }   
           }  
    </script> 

然后在您的bean類中，進行如下更改。

  public void constructUser() {
        /*ADD SOME LOGIC TO CHECK if selected is initializeded with values based on if selected is not initialized with values add callback parameter RequestContext.getCurrentInstance().addCallbackParam("noUserSelected", true);*/
        updated = selected;
    }

這樣您將在js函數中獲取此參數，並且不會顯示對話框。

HTH，