将 <span> 放入 <p:panelGrid> 会导致“奇怪”显示

Question

我想创建带有 ajax 更新事件的动态表单。因此动态ID很重要。但是，将 id 属性绑定到 bean 值会导致 Empty Id 异常。我看到了建议使用 html 的 stackoverflow 问题之一。所以我使用了跨度。

xhtml代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui" template="../../templates/ui.xhtml">

    <ui:define name="content">
        <h:form id="testform">
            <ui:repeat value="#{repeat.questions}" var="question">
                <p:panelGrid columns="2">
                    <p:outputLabel value="#{question.label}"/>

                    <span id="#{question.questionCode}">
                        <p:inputText value="#{repeat.values[question.questionCode]}"
                                     rendered="#{question.type == 'TEXT'}">
                            <p:ajax event="blur" update="#{question.dependentQuestionCode}"
                                    disabled="#{empty question.dependentQuestionCode}"/>
                        </p:inputText>

                        <p:password value="#{repeat.values[question.questionCode]}"
                                    rendered="#{question.type == 'SECRET'}">
                        </p:password>

                        <p:inputTextarea value="#{repeat.values[question.questionCode]}"
                                         rendered="#{question.type == 'TEXTAREA'}">
                        </p:inputTextarea>

                        <p:selectOneRadio value="#{repeat.values[question.questionCode]}"
                                          rendered="#{question.type == 'RADIO'}" layout="grid" columns="1">
                            <f:selectItems value="#{question.options}"/>
                        </p:selectOneRadio>

                        <p:selectOneMenu value="#{repeat.values[question.questionCode]}"
                                         rendered="#{question.type == 'SELECTONE'}">
                            <f:selectItems value="#{question.options}"/>
                        </p:selectOneMenu>

                        <p:selectManyMenu value="#{repeat.values[question.questionCode]}"
                                          rendered="#{question.type == 'SELECTMANY'}">
                            <f:selectItems value="#{question.options}"/>
                        </p:selectManyMenu>

                        <p:selectBooleanCheckbox
                                value="#{repeat.values[question.questionCode]}"
                                rendered="#{question.type == 'CHECKONE'}"/>

                        <p:selectManyCheckbox value="#{repeat.values[question.questionCode]}"
                                              rendered="#{question.type == 'CHECKMANY'}">
                            <f:selectItems value="#{question.options}"/>
                        </p:selectManyCheckbox>
                     </span>
                </p:panelGrid>
            </ui:repeat>

            <p:commandButton value="Submit" actionListener="#{repeat.submit}"/>
        </h:form>
    </ui:define>
</ui:composition>

但是，显示很奇怪。它在每次迭代中关闭了跨度。为什么跨度关闭标签之前跨度关闭不合理？

Answer 1

<h|p:panelGrid> 仅将真正的 JSF 子组件划分为列，而不是普通的 HTML 元素。

将<span>（或更好的<div>）作为<ui:repeat> 的直接子级。

<ui:repeat value="#{bean.questions}" var="question">
    <div id="#{question.code}">
        <p:panelGrid>
            ...
        </p:panelGrid>
    </div>
</ui:repeat>