当单击编辑按钮时，引导模态框填充了来自 dataTable 列的错误用户数据

Question

这是我的表

假设我在表中有 10 个用户，我单击用户 ID 2 进行编辑，引导模式将表中的最后一个用户显示为模态; 即用户 ID 10。

<div class="tab-pane fade" id="add9">
<h:form class="form-horizontal" >
<h3 class="title-section title-bar-high mb-40">System User Report</h3>
<div class="orders-info">
<div class="table-responsive">
<b:dataTable class="table table-bordered table-responsive" var="user" value="#{userBean.findsAll()}" onorder="console.log('order');" onselect="ajax:userBean.editUser(user)" onpage="console.log('page');" >
<h:column>
<f:facet name="header">Sr. No.</f:facet>
<h:outputText value="#{user.id}" />
</h:column>
<h:column>
<f:facet name="header">Name</f:facet>
<h:outputText value="#{user.userName}" />
</h:column>
<h:column>
<f:facet name="header">Status</f:facet>
<h:outputText value="#{user.userLevel}" />
</h:column>
<h:column>
<f:facet name="header">Mobile</f:facet>
<h:outputText value="#{user.userPhone}" />
</h:column>
<h:column>
<f:facet name="header">Email</f:facet>
<h:outputText value="#{user.userEmail}" />
</h:column>
<h:column>
<f:facet name="header">Date</f:facet>
<h:outputText value="#{user.userDate}" />
</h:column>
<h:column>
<f:facet name="header">Action</f:facet>
<b:commandButton iconAwesome="pencil" look="link" action="#{userBean.editUser(user)}" onclick="$('.modalPseudoClass').modal();return false;">
<f:ajax execute="#{userBean.editUser(user)}" render="@none" />
</b:commandButton>
<b:commandButton action="#{userBean.deleteUser(user)}" onclick="return confirm('You Are About You Delete This User!')" iconAwesome="trash" look="link">                            
</b:commandButton>
</h:column>
</b:dataTable>
</div>
</div>
</h:form>
</div>

这是我的豆子控制器

public class UserBean implements Serializable {
@EJB
private UserFacade userFacade;
private User user;
public UserBean() {
user = new User();
}
public UserFacade getUserFacade() {
return userFacade;
}
public void setUserFacade(UserFacade userFacade) {
this.userFacade = userFacade;
}
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
public void deleteUser(User user){
userFacade.remove(user);
}
public void editUser(User user){
this.user = user;
}
public void editUser(){
userFacade.edit(this.getUser());
user = new User();
}   
}

这是我的靴子模态

<f:view>
<h:form class="form-horizontal">
<b:modal id="amodal" title="Basic info and Contact No. #{userBean.user.id}" styleClass="modalPseudoClass">
<div class="profile-details tab-content">
<div class="personal-info">
<div class="form-group">
<h:outputLabel class="col-sm-3 control-label" for="userName">User Name:</h:outputLabel>
<div class="col-sm-9">
<h:inputText class="form-control" id="userName" value="#{userBean.user.userName}" title="UserName" requiredMessage="" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<h:outputLabel class="col-sm-3 control-label" for="firstName">First Name:</h:outputLabel>
<div class="col-sm-9">
<h:inputText class="form-control" id="firstName" value="#{userBean.user.firstName}" title="FirstName" requiredMessage="" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<h:outputLabel class="col-sm-3 control-label" for="lastName">last-name:</h:outputLabel>
<div class="col-sm-9">
<h:inputText class="form-control" id="lastName" value="#{userBean.user.lastName}" title="LastName" requiredMessage="" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<h:outputLabel class="col-sm-3 control-label" for="userEmail">E-mail Address:</h:outputLabel>
<div class="col-sm-9">
<h:inputText class="form-control" id="userEmail" value="#{userBean.user.userEmail}" title="UserEmail" requiredMessage="" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<h:outputLabel class="col-sm-3 control-label" for="userPostal">Zip Code:</h:outputLabel>
<div class="col-sm-9">
<h:inputText class="form-control" id="userPostal" value="#{userBean.user.userPostal}" title="UserPostal" requiredMessage="" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<h:outputLabel class="col-sm-3 control-label" for="userPhone">Phone:</h:outputLabel>
<div class="col-sm-9">
<h:inputText class="form-control" id="userPhone" value="#{userBean.user.userPhone}" title="UserPhone" requiredMessage="" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<h:outputLabel class="col-sm-3 control-label" for="userCountry">Country:</h:outputLabel>
<div class="col-sm-9">
<div class="custom-select">
<h:selectOneMenu id="userCountry" value="#{userBean.user.userCountry}" title="UserCountry" class="select2">
<f:selectItem itemValue = "o" itemLabel = "Please Select" />
<f:selectItem itemValue = "Bangladesh" itemLabel = "Bangladesh" /> 
<f:selectItem itemValue = "Spain" itemLabel = "Spain" /> 
<f:selectItem itemValue = "Belgium" itemLabel = "Belgium" /> 
<f:selectItem itemValue = "Ecuador" itemLabel = "Ecuador" /> 
<f:selectItem itemValue = "Ghana" itemLabel = "Ghana" /> 
<f:selectItem itemValue = "South Africa" itemLabel = "South Africa" /> 
<f:selectItem itemValue = "India" itemLabel = "India" /> 
<f:selectItem itemValue = "Pakistan" itemLabel = "Pakistan" /> 
<f:selectItem itemValue = "Thailand" itemLabel = "Thailand" /> 
<f:selectItem itemValue = "Malaysia" itemLabel = "Malaysia" /> 
<f:selectItem itemValue = "Italy" itemLabel = "Italy" /> 
<f:selectItem itemValue = "Japan" itemLabel = "Japan" /> 
</h:selectOneMenu>
</div>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<h:outputLabel class="col-sm-3 control-label" for="userLevel">User Level:</h:outputLabel>
<div class="col-sm-9">
<div class="custom-select">
<h:selectOneMenu class="select2" id="userLevel" value="#{userBean.user.userLevel}" title="UserLevel">
<f:selectItem itemLabel="Choose item" noSelectionOption="true" />
<f:selectItems value="#{userBean.findAllUserRole()}" var="user" itemLabel="#{user.name}" itemValue="#{user.name}" />
<f:ajax render="#{user.name}" />
</h:selectOneMenu>
</div>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<h:outputLabel class="col-sm-3 control-label" value="Town / City:" for="userTown" />
<div class="col-sm-9">
<h:inputText class="form-control" id="userTown" value="#{userBean.user.userTown}" title="UserTown" requiredMessage="" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<h:outputLabel class="col-sm-3 control-label" for="userAbout">About Me:</h:outputLabel>
<div class="col-sm-9">
<h:inputTextarea class="form-control" id="userAbout" value="#{userBean.user.userAbout}" title="UserAbout" requiredMessage="" style="height: 150px;" rows="8" />
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<f:facet name="footer">
<div class="form-group mb-none">
<div class="col-sm-3">
<b:commandButton value="Save" look="success" style="width:80px" action="#{userBean.editUser()}" a:dismiss="modal" />
</div>
<div class="col-sm-3">
<b:button value="Close" look="warning"  style="width:80px" dismiss="modal" />
</div>
</div>
</f:facet>
</div>
</b:modal>
</h:form>
</f:view>

Answer 1

当用户选择一行时，您需要更新模式的内容。你知道，数据表和模态是同一个 XHTML 文件的一部分，所以它们是同时呈现的。当然，这还为时过早，因此，如果未更新，模式会显示错误的用户。

顺便说一句，我相信将user重命名为selectedUser是个好主意，用 null 初始化它，并且仅在selectedUser不为 null 时才呈现模态的内容。这样，当出现问题时，您会注意到。此外，发送到客户端的 HTML 代码更少。

与您的问题没有直接关系：您的代码片段调用editUser()多次。你可能想做一些家务整理。