Question

我有一个panelGrid，其中一行包含selectCheckBoxMenu，另一行应根据选择显示或隐藏。

不希望在更改选择时更新整个面板，因为selectCheckBoxMenu将被刷新，并且用户必须再次打开他想要选择的每个项目的下拉列表。

更新要隐藏或显示的控件无法解决问题，因为如果因为渲染为假而未显示它们，则无法更新它们。

因此，我将这些控件包装在Fragment中并更新这些片段。功能上没关系，但现在我的布局很难看，因为在大多数情况下，控件将被隐藏，并显示一个小的空行。

是否有可能在不破坏功能的情况下摆脱那个丑陋的空行？

我的xhtml看起来像这样：

<p:panelGrid id="panel" columns="2" border="0" cellpadding="5"
    cellspacing="2">
    ...
    <h:outputLabel value="Type" />
    <p:selectCheckboxMenu id="deviceTypeMenu" value="#{controller.criteria.dts}" label="All" converter="dtConverter"
          filter="true" filterMatchMode="contains"
          panelStyle="width:300px" valueChangeListener="#{controller.onChange}"
          updateLabel="true">
        <p:ajax update="sclabel scfield" />
        <f:selectItems value="#{deviceTypeBean.alldts}" var="dt"
            itemLabel="#{dt.name}" itemValue="#{dt}"/>
    </p:selectCheckboxMenu>
    ...
    <p:fragment id="sclabel">
        <h:outputText value="Detail" rendered="#{controller.detailRequired}"/>
    </p:fragment>
    <p:fragment id="scfield">
        <p:selectCheckboxMenu rendered="#{controller.detailRequired}" converter="#{detailConverter}"
            value="#{controller.criteria.detail}" label="All details"
            filter="true" filterMatchMode="contains"
            style="width:300px;" scrollHeight="100"
            updateLabel="true">
            <f:selectItems value="#{detailConverter.values}" var="adetail"
                itemLabel="#{adetail.name}" itemValue="#{adetail}" />
        </p:selectCheckboxMenu>
    </p:fragment>
    ...
</p:panelGrid>

Answer 1

<强>原因

空行包含填充。表格行和表格单元格html元素由panelgrid创建，因为它为每一行呈现这些元素，并且只要有一些子元素呈现一行。它们上面有样式，由panelgrid设置并引用包含填充的样式。碎片，即使它们不能自己渲染任何东西，也足以触发它。

备注：我们正在使用Primefaces的Modena主题。因此，填充是摩德纳主题的一部分。导致问题的摩德纳样式表的摘录：

.ui-panelgrid .ui-panelgrid-cell {
    border-width: 1px;
    border-style: solid;
    border-color: inherit;
    padding: 4px 10px;
}

<强>解决方案

我做了以下更改：

我使用primefaces行和列组件显式指定了行和列，并添加了样式类＆＃34; ui-panelgrid-cell-nopadding＆＃34;到我需要隐藏的行的列。我将下面的样式添加到我的样式表中，以便该样式类从面板网格添加的单元格中删除/覆盖填充。

.ui-panelgrid .ui-panelgrid-cell-nopadding { 填充：0px 0px; }
我在单元格中的控件周围添加了一个div，并将类ui-panelgrid-cell应用于它，以添加我从单元格中删除的填充。

备注：我首先尝试了一个面板，但随后它变得更加复杂，因为Primefaces面板还添加了样式，导致我的面板网格中的其他行布局不一致（fontsize已更改）。
我在已经拥有的片段和div之间添加了第二个片段，我将渲染的属性从单元格内的控件移动到这些片段。因此，如果我不希望渲染行，那么div上定义的填充不再存在。

一个片段已经不够了，因为我需要一个带有id才能通过ajax更新它，第二个带有render属性。如果您将这些属性放在同一个片段上，则只要它隐藏起来就不能再显示它们。将id移动到显式定义的列也是不可能的，因为这些单元格表现奇怪，可能是因为它们在最初渲染panelgrid时是空的。当细胞更新以使它们可见时，我的行的两个细胞的内容出现在左侧细胞中，右侧细胞仍然是空的。
之后，我在div周围有一个边框，因为这是我在Modena风格中指定的，我应用于div以获得从单元格中删除的填充。因为div的内容小于单元格，所以我有一个额外的边框，我不想要。所以我在样式表中添加了一些内容来删除边框。

.ui-panelgrid .ui-panelgrid-cell-nopadding .ui-panelgrid-cell { 边界：无;边框：0像素; }

我的xhtml现在看起来像这样：

<p:panelGrid id="panel" border="0">
    ...
    <p:row>
        <p:column>
            <h:outputLabel value="Type" />
            <p:selectCheckboxMenu id="deviceTypeMenu" value="#{controller.criteria.dts}" label="All" converter="dtConverter"
        </p:column>
        <p:column>
                filter="true" filterMatchMode="contains"
                panelStyle="width:300px" valueChangeListener="#{controller.onChange}"
                updateLabel="true">
                <p:ajax update="sclabel scfield" />
                <f:selectItems value="#{deviceTypeBean.alldts}" var="dt"
                    itemLabel="#{dt.name}" itemValue="#{dt}"/>
            </p:selectCheckboxMenu>
        </p:column>
    </p:row>
    ...
    <p:row>
        <p:column styleClass="ui-panelgrid-cell-nopadding">
            <p:fragment id="sclabel">
                <p:fragment rendered="#{controller.detailRequired}">
                    <div class="ui-panelgrid-cell">
                        <h:outputText value="Detail"/>
                    </div>
                </p:fragment>
            </p:fragment>
        </p:column>
        <p:column styleClass="ui-panelgrid-cell-nopadding">
            <p:fragment id="scfield">
                <p:fragment rendered="#{controller.detailRequired}">
                    <div class="ui-panelgrid-cell">
                        <p:selectCheckboxMenu converter="#{detailConverter}"
                            value="#{controller.criteria.detail}" label="All details"
                            filter="true" filterMatchMode="contains"
                            style="width:300px;" scrollHeight="100"
                            updateLabel="true">
                            <f:selectItems value="#{detailConverter.values}" var="adetail"
                                itemLabel="#{adetail.name}" itemValue="#{adetail}" />
                        </p:selectCheckboxMenu>
                    </div>
                </p:fragment>
            </p:fragment>
        </p:column>
    <.p:row>
    ...
</p:panelGrid>

Answer 2

例如，将ID放入行：

在javascript中：如果（您需要的条件） { document.getElementById（“ form：idEmpresa”）。style.display =“ none”;
}

准备好

如何根据在另一行

2 个答案: