p:datatable 上的 JSF Primefaces ajax答案

【问题标题】：JSF Primefaces ajax on p:datatablep:datatable 上的 JSF Primefaces ajax
【发布时间】：2014-05-14 02:31:23
【问题描述】：

我正在为我的 UI 使用 JSF Primefaces。我对 p:datatable 上的 ajax 有特定要求。这是我的项目的示例页面：

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition
    xmlns="http://www.w3.org/1999/xhtml"
    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:p="http://primefaces.org/ui"
    xmlns:fn="http://java.sun.com/jsp/jstl/functions"
    xmlns:comp="http://java.sun.com/jsf/composite/components/">

    <ui:define name="content">

        <h:form id="form1">

            <p:growl id="messages" showDetail="false" />

            <p:panel header="Available Rows" style="width: 15%;">

                <p:dataTable id="table" value="#{rowBean.rows}" var="row" 
                    widgetVar="50" style="width: 60px;" editable="true">

                    <p:ajax event="rowEdit" listener="#{rowBean.onEdit}" 
                        update="form1:messages" />
                    <p:ajax event="rowEditCancel" listener="#{rowBean.onCancel}" 
                        update=":form1:messages" />

                    <p:column>
                        <f:facet name="header">  
                            <h:outputText value="Row ID" />
                        </f:facet>
                        <p:cellEditor>
                            <f:facet name="output">
                                <h:outputText value="#{row.id}" />
                            </f:facet>
                            <f:facet name="input">
                                <p:inputText value="#{row.id}" 
                                    style="width:100%" label="Row ID">
                                </p:inputText>
                            </f:facet>
                        </p:cellEditor>
                    </p:column>

                    <p:column>
                        <f:facet name="header">  
                            <h:outputText value="Row Value" />
                        </f:facet>
                        <p:cellEditor>
                            <f:facet name="output">
                                <h:outputText value="#{row.value}" />
                            </f:facet>
                            <f:facet name="input">
                                <p:inputText disabled="true" value="#{row.value}" 
                                    style="width:100%" label="Row Value">
                                </p:inputText>
                            </f:facet>
                        </p:cellEditor>
                    </p:column>

                    <p:column style="width:6%">
                        <p:rowEditor />
                    </p:column>

                </p:dataTable>

            </p:panel>

            <p:spacer height="5px;"/>

            <p:panel id="createPanel" header="Create Row" closable="false" toggleable="true" 
                collapsed="true" style="width: 15%;">
                <p:panelGrid columns="6">

                    <h:outputLabel for="rowBean" value="Row ID" />
                    <p:inputText value="#{rowBean.row.id}" 
                        required="true" label="Row ID" style="width:125px" />

                    <h:outputLabel for="rowBean" value="Row Value" />
                    <p:inputText value="#{rowBean.row.value}" 
                        required="true" label="Row Value" style="width:125px" />

                    <f:facet name="footer">
                        <p:commandButton value="Create" action="#{rowBean.createRow}" 
                            update=":form1" />
                    </f:facet>
                </p:panelGrid>
            </p:panel>

        </h:form>

    </ui:define>

</ui:composition>

这里我有一个数据表，列出了所有创建的行。每行都有 id 和 value。值是可编辑的。表单中还有一个面板可以创建新行。支持 bean 使用 @PostConstruct 预先填充了所有创建的行。 Backing bean 有其他方法可以编辑、取消和创建。此页面正在运行，下面给出的是新要求。

在某些情况下，每一行都可能存在错误。如果行附加了错误，则需要像链接一样更新值文本。单击链接时，需要将行 ID 和参数传递给支持 bean。使用这些参数，支持 bean 获取错误详细信息并将其传递给页面。然后需要在弹出窗口中显示错误消息。

你能告诉我怎么做吗？

【问题讨论】：

你不能考虑使用<p:messages>、<h:messages>或<p:growl>吗？

标签： ajax jsf primefaces

【解决方案1】：

可能是这样的？：

<f:facet name="output">
    <h:outputText value="#{row.value}" rendered="#{!row.hasError}" />
    <h:commandLink value="#{row.value}" rendered="#{row.hasError}" command="#{row.command(parameters..)}" />
</f:facet>

【讨论】：

【解决方案2】：

在 XHTML 方面：

<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />

在JAVA方面，在你按下按钮时调用的函数中：

if(error) {    
    FacesContext.getCurrentInstance().addMessage(
    null,
    new FacesMessage(FacesMessage.SEVERITY_WARN, "Error",
    "Your error message.")); 
}

PD：这是我的第一个答案，我已经习惯了发布选项，如果您没有正确看到我的消息，我很抱歉；）

【讨论】：