首页 > 解决方案 > 验证失败时,Primefaces 单元格编辑离开编辑模式

问题描述

我在with editable=true上使用p:dataTable单元格编辑和验证器。p:selectOneMenu如果选择的 p:selectOneMenu 值或输入的值无效,我希望单元格编辑状态保持在编辑模式(第二个屏幕截图),并在输入周围显示红色框,就像我使用常规表单时一样(第三个屏幕截图)。当验证失败时,会显示咆哮和消息,但下拉菜单周围的红色框不会持续存在,恐怕用户可能会忽视(第一个屏幕截图)。我不知道如何进行 ajax 更新以显示红色框,但将单元格保持在编辑模式,以便下拉列表和红色框仍然可见。

<p:dataTable id="table" value="#{bean.data}" var="lineItem" editable="true" editMode="cell">

<p:column headerText="* Account">
  <p:cellEditor>
    <f:facet name="output">
       <h:outputText value="#{lineItem.account}" />
    </f:facet>

    <f:facet name="input">
      <p:selectOneMenu id="so" value="#{lineItem.account}" editable="true" dynamic="true"  converter="omnifaces.SelectItemsConverter" title="Type an account or select a stored favorite" validator="com.gdeb.rozycki.app.acountValidator" >

      <f:selectItem noSelectionOption="true" itemLabel="---Favorites" itemValue="null" />
      <f:selectItems value="#{bean.favorites}" var="fav" itemLabel="#{fav.acctNum}" itemValue="#{fav}" />
                                            
      <p:ajax disabled="#{facesContext.validationFailed}" update="table growl messages" listener="#{bean.updateAccountInline(lineItem)}" />
      </p:selectOneMenu>
    </f:facet>
  </p:cellEditor>
</p:column>

此屏幕截图我尝试将帐户更改为已存储的收藏夹,该收藏夹已用空格保存,我们不再需要空格。(是的,我现在有验证,当用户保存他们最喜欢的帐号时不允许有空格,但我们将实施其他验证)当验证失败时,只显示标题和咆哮消息。在他们再次单击下拉菜单之前,红线不可见,如第二个屏幕截图所示。

在此处输入图像描述 在此处输入图像描述 在此处输入图像描述

标签: jsfprimefacesprimefaces-datatable

解决方案


该调用在其属性中具有数据ajax表 ID 。我删除了那个 ClientID 并删除了tableupdatedisabled="#{facesContext.validationFailed}"

我认为该cellEdit函数会自动更新实现 cellEdit 的组件 ClientId。所以不需要在我的 ajax 标记中明确指定。

而且我还猜测 ajax 标签总是运行更新,但监听器只有成功。

我可能不完全理解为什么,但这对我有用:

  <p:ajax update="growl messages" listener="#{bean.updateAccountInline(lineItem)}" />

推荐阅读