panelGrid with commandButton

Question

我有一个xhtml文件。当我输入一个id为a的命令Button时，我的表格很混乱。如果我想在oneRow中放置outPutLabe，autoComplete和commandButton，我的解决方法是什么？我想要第一行中的三个组件然后每个分隔行中的两个组件位置。

    <h:form id="frm">
        <p:messages globalOnly="false" styleClass="error" autoUpdate="true" id="msgDiseaseHistory"/>
        <p:outputPanel id="PanleId">
            <h:panelGrid columns="3">
                <h:panelGroup>
                    <fieldset>
                        <legend>History:</legend>
                        <h:panelGrid id="Grid" columnClasses="label,component,required"
                                     columns="2">
                            <p:outputLabel for="EMRName" value="Name:"/>
                            <p:autoComplete id="EMRName"
                                            value="#{record.dermatology}"
                                            completeMethod="#{record.complete}"
                                    />
                            <p:commandButton id="a" value="+"
                                             action="#{record.add}"
                                             onclick="PF('addDlg').show();"/>


                            <p:outputLabel for="date" value="StartDate:"/>
                            <p:calendar id="date"
                                        value="#{record.date}"
                                        pattern="yyyy-MMM-dd"
                                        converter="dateConverter"/>

                            <p:outputLabel for="duration" value="Duration:"/>
                            <p:inputText id="duration"
                                         value="#{record.duration}"/>


                            <p:outputLabel for="description" value="Description:"/>
                            <p:inputTextarea id="description"
                                             value="#{record.description}"/>
                        </h:panelGrid>


                    </fieldset>
                </h:panelGroup>
                <h:panelGroup>
                    <fieldset>
                        <legend>Disease:</legend>
                        <h:panelGrid id="diseaseGrid" columnClasses="label,component,required"
                                     columns="2">

                            <p:outputLabel for="diseaseName" value="Name:"/>
                            <p:inputText id="diseaseName"
                                         value="#{record.disease}"/>

                            <p:outputLabel for="historyDate" value="StartDate:"/>
                            <p:calendar id="historyDate"
                                        pattern="yyyy-MMM-dd"
                                        converter="dateConverter"
                                        value="#{record.diseaseDate}"/>

                            <p:outputLabel for="EMRBeanDiseaseHistoryDuration" value="Duration:"/>
                            <p:inputText id="history"
                                         value="#{record.diseaseDuration}"/>

                            <p:outputLabel for="Efrg" value="Description:"/>
                            <p:inputTextarea id="Efrg"
                                             value="#{record.diseaseDescription}"/>
                        </h:panelGrid>
                    </fieldset>
                </h:panelGroup>

            </h:panelGrid>
            <h:panelGrid columns="2">
                <h:panelGroup>
                    <fieldset>
                        <legend>Family:</legend>
                        <h:panelGrid id="FamilyHistoryGrid" columnClasses="label,component,required"
                                     columns="2">
                            <p:outputLabel for="historyName" value="Description:"/>
                            <p:inputTextarea id="historyName"
                                             value="#{record.tree}"/>
                        </h:panelGrid>
                    </fieldset>
                </h:panelGroup>
                <h:panelGroup>
                    <fieldset>
                        <legend>Family:</legend>
                        <h:panelGrid id="familyGrid" columnClasses="label,component,required"
                                     columns="2">

                            <p:outputLabel for="family" value="Description:"/>
                            <p:inputTextarea id="family"
                                             value="#{record.family}"/>
                        </h:panelGrid>
                    </fieldset>
                </h:panelGroup>

            </h:panelGrid>


            <h:panelGrid id="buttonsGrid" columnClasses="label,component,required" columns="2">
                <h:panelGroup>
                    <p:commandButton value="Save" action="#{record.save}"
                                     update=":create"
                                     oncomplete="if(!args.validationFailed  &amp;&amp; args.saved )PF('HistoryDlg').hide();"
                                     ajax="true"

                            />

                </h:panelGroup>
                <h:outputText/>
            </h:panelGrid>

        </p:outputPanel>
    </h:form>

Answer 1

您已在第一个panelGrid中定义了三列，但只是为了指导子（panelGroup）。只需了解panelGrid的工作原理。如果你已经定义了两列（比如在第二个panelgrid中，它需要每对childern并将它放在col1和col2中。如果你（你自己）通过添加一个commandButton搞砸了这一切，那么一切都会移动......所以要么添加例如一个在commandButton之后或之前添加空白，或将命令按钮移动到其他位置。