0

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

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

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

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

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

我的 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>
4

2 回答 2

1

原因

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

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

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

解决方案

我做了以下更改：

  1. 我使用 primefaces 行和列组件明确指定了行和列，并在我需要隐藏的行的列中添加了一个样式类“ui-panelgrid-cell-nopadding”。我将下面的样式添加到我的样式表中，以便该样式类从面板网格添加的那个单元格中删除/覆盖填充。

    .ui-panelgrid .ui-panelgrid-cell-nopadding { 填充：0px 0px; }

  2. 我在单元格中的控件周围添加了一个 div，并将类 ui-panelgrid-cell 应用到它以添加我从单元格中删除的填充。

    备注：我首先为此尝试了一个面板，但后来变得更加复杂，因为 Primefaces 面板还添加了样式类，这导致与我的面板网格中的其他行的布局不一致（字体大小已更改）。

  3. 我在已有的片段和 div 之间添加了第二个片段，并将渲染属性从单元格内的控件移动到这些片段。如果我不想渲染该行，那么在 div 上定义的填充将不再存在。

    一个片段已经不够用了，因为我需要一个带有 id 的片段才能通过 ajax 更新它，另一个片段带有渲染属性。如果你把这些属性放在同一个片段上，一旦它被隐藏，你就不能让它变得可见。将 id 移动到明确定义的列也是不可能的，因为这些单元格的行为可能很奇怪，因为它们在最初渲染 panelgrid 时是空的。当单元格被更新以使其可见时，我的行的两个单元格的内容都出现在左侧单元格中，而右侧单元格保持为空。

  4. 之后，我在 div 周围设置了一个边框，因为这是在 Modena 样式中指定的，我将其应用于 div 以从单元格中删除填充。而且因为 div 的内容比单元格小，所以我有一个额外的边框，我不想要。所以我在我的样式表中添加了一些东西来删除那个边框。

    .ui-panelgrid .ui-panelgrid-cell-nopadding .ui-panelgrid-cell { 边框：无；边框：0px；}

我的 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>
于 2017-07-14T09:59:04.763 回答
0

例如，将 Id 放在行中：

在 javascript 中：如果（您需要的条件）{ document.getElementById("form:idEmpresa").style.display = "none";
}

准备好

于 2019-08-02T19:25:35.030 回答