JSF+PrimeFaces模态编辑框无法显示待编辑数据求助
问题
我用JSF2和PrimeFaces搭建了CRUD系统,原本点击编辑按钮会跳转新页面自动填充待修改记录的数据。现在改成在当前页面弹出模态框编辑,但模态框里的字段始终是空的,跟新增数据状态一样,这是什么原因?
代码如下:
<ui:composition xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns="http://www.w3.org/1999/xhtml" xmlns:p="http://primefaces.org/ui"> <p:dialog draggable="true" id="editImcs" widgetVar="edit" resizable="true" showEffect="clip" hideEffect="clip" width="360" onShow="loadEvents()"> <p:outputPanel id="painelFormIcmsWrapper" styleClass="row"> <div class="col-12"> <span class="form-group"> <p:outputLabel value="#{sessionMB.getLabel('label_ufsori')} " /> <p:selectOneMenu id="ufsoriEdit" value="#{MB.entidade.ufsori}" styleClass="form-control" > <f:selectItem itemLabel="" itemValue="" noSelectionOption="true"/> <f:selectItems value="#{MB.ufsIcms}" var="item" itemLabel="#{item.id}" itemValue="#{item.id}"> </f:selectItems> </p:selectOneMenu> </span> </div> <div class="col-12"> <span class="form-group"> <p:outputLabel value="#{sessionMB.getLabel('label_ufsdes')} " /> <p:selectOneMenu id="ufsdesEdit" value="#{MB.entidade.ufsdes}" styleClass="form-control" > <f:selectItem itemLabel="" itemValue="" noSelectionOption="true"/> <f:selectItems value="#{MB.ufsIcms}" var="item" itemLabel="#{item.id}" itemValue="#{item.id}"> </f:selectItems> </p:selectOneMenu> </span> </div> <div class="field col-12 md:col-4"> <span class="form-group"> <p:outputLabel for="pericmEdit" value="#{sessionMB.getLabel('label_pericm')}"/> <p:inputText id="pericmEdit" value="#{MB.entidade.pericm}" label="#{sessionMB.getLabel('label_pericm')}" styleClass="form-control numeric" decimalPlaces="15"/> </span> </div> </p:outputPanel> <f:facet name="footer"> <div class="row lineBtn"> <div class="col-6"> <p:commandButton type="button" icon="fa fa-close" value="#{sessionMB.getLabel('label_cancelar')}" styleClass="btn btn-danger d-flex align-items-center justify-content-center text-lowercase float-right" onclick="PF('edit').hide();" /> </div> <div class="col-6"> <p:commandButton icon="fa fa-save" value="#{sessionMB.getLabel('label_salvar')}" update="resultados mensagensIcms" partialSubmit="true" process="@this ufsdesEdit ufsoriEdit pericmEdit" styleClass="btn btn-primary d-flex align-items-center justify-content-center text-lowercase px-4" /> </div> </div> </f:facet> </p:dialog> <p:growl id="mensagensIcms" showDetail="true" showSummary="false" sticky="true" /> </ui:composition>
原因及解决方案
核心原因
模态框弹出时,既没有把选中的待编辑数据加载到后台Bean的entidade对象中,也没有触发模态框内容的局部刷新。原来的跳转页面方式是通过请求将数据带到新页面,而模态框在当前页面,必须完成「数据加载→局部刷新」这两步才能正确显示待编辑内容。
具体修复步骤
补全编辑按钮的核心逻辑
你当前代码缺少编辑按钮的实现,正常编辑按钮需要完成三件事:调用后台方法加载选中数据、刷新模态框表单、弹出模态框。示例代码如下:<p:commandButton value="编辑" action="#{MB.carregarParaEdicao(selecionado)}" <!-- 把列表中选中的对象传给后台 --> update="painelFormIcmsWrapper" <!-- 刷新模态框内的表单面板 --> oncomplete="PF('edit').show();" <!-- 刷新完成后弹出模态框 --> />后台Bean对应的方法:
public void carregarParaEdicao(Entidade selecionado) { // 建议深拷贝或通过EntityManager.merge()获取持久化对象,避免直接引用列表对象导致意外修改 this.entidade = selecionado; }检查Bean作用域
确保后台MB的作用域是@ViewScoped(JSF2.x标准作用域),如果用@RequestScoped,每次请求都会重建Bean,导致entidade数据丢失。排查
onShow方法的干扰
你设置了onShow="loadEvents()",如果这个JS方法存在清空表单或重置字段的逻辑,会覆盖后台加载的数据。检查该方法的代码,确保它是在数据加载完成后执行辅助逻辑,而非重置表单。验证数据绑定的正确性
确认MB.entidade的属性(ufsori、ufsdes、pericm)与表单字段的value绑定完全匹配,没有拼写错误或类型不匹配的问题。
内容的提问来源于stack exchange,提问作者Dev_Edimar FUll stack
相关产品推荐
相关产品推荐

