1

我有 1 个很长的表格需要分成几部分，但它被提交并验证为一个。

我已将其拆分为 tr:panelTabbed 部分，每个部分显示一组字段。

验证消息会在第一个选项卡中正确显示，但如果选中其他选项卡之一，则不会显示其验证消息。

回到原来的选项卡，它的验证消息也不会显示。

有没有办法解决？

看起来标签界面一次只生成一个标签，并且需要为每个标签重新加载页面。

或者有没有更好的方法来分解一个大表格？我不太喜欢“火车”导航的外观，但它会在这里实现目标吗？

编辑：我正在使用 Myfaces 和 Trinidad，由于公司准则，我无法使用其他组件库。

编辑：我已经发布了 XHTML：

<ui:define name="output">
    <div id="container">
    <tr:panelTabbed position="above">

    <tr:showDetailItem text="#{odMessages['MSG_ORDER_DESK_SECTION_LABEL_EVS']}" rendered="#{taskHandler.task.evsDisplayInOD}">
        <!-- Tab 1-->
        <tr:panelCaptionGroup captionText="#{odMessages['MSG_ORDER_DESK_SECTION_LABEL_EVS']}" rendered="#{taskHandler.task.evsDisplayInOD}">
            <snip for brevity>
        </tr:panelCaptionGroup>
    </tr:showDetailItem>

    <tr:showDetailItem text="General Order Information" disabled="#{taskHandler.task.evsDisplayInOD}" disclosed="true">
        <!-- Tab 2-->
        <tr:panelCaptionGroup captionText="#{odMessages['MSG_ORDER_DESK_SECTION_LABEL_REP']}">
            <tr:panelFormLayout>
                <snip>
            </tr:panelFormLayout>
        </tr:panelCaptionGroup>
        <tr:spacer height="15px"/>

        <tr:panelCaptionGroup captionText="#{odMessages['MSG_ORDER_DESK_SECTION_LABEL_CMR']}">
            <tr:panelFormLayout>
                <snip>
            </tr:panelFormLayout>
        </tr:panelCaptionGroup>
    </tr:showDetailItem>

    <tr:showDetailItem text="#{odMessages['MSG_ORDER_DESK_SECTION_LABEL_PO']}" disabled="#{taskHandler.task.evsDisplayInOD}" disclosed="true">

        <!-- Tab 3 -->  
        <tr:panelCaptionGroup captionText="#{odMessages['MSG_ORDER_DESK_SECTION_LABEL_PO']}">
            <h:panelGroup styleClass="group">
                <snip>
            </h:panelGroup>
            <h:panelGroup styleClass="group">
                <snip>
            </h:panelGroup>
            <h:panelGroup styleClass="group">
                <snip>
            </h:panelGroup>
        </tr:panelCaptionGroup>
        <tr:spacer height="15px"/>
        <tr:panelCaptionGroup captionText="#{odMessages['MSG_ORDER_DESK_SECTION_LABEL_PO']}">
            <h:panelGroup styleClass="group">
                <snip>
            </h:panelGroup>
            <h:panelGroup styleClass="group">
                <snip>
            </h:panelGroup>
            <h:panelGroup styleClass="group">
                <snip>
            </h:panelGroup>
        </tr:panelCaptionGroup>
    </tr:showDetailItem>

    <tr:showDetailItem text="Translation Information" disabled="#{!taskHandler.task.translation.required}">
        <ui:include src="ToDo_ICN_trans.xhtml"/>
    </tr:showDetailItem>

    </tr:panelTabbed>
    <h:outputScript name="script/orderDeskPODocument.js"/>
    </div>
</ui:define>

<ui:define name="input">
...
</ui:define>

4

1 回答 1

0

我最终为此使用了基本的 Javascript + CSS 选项卡。对于我的用例，选项卡实际上是装饰性的，即它们分解了页面，但并不意味着要单独提交。

我也考虑过使用纯 CSS 选项卡，但是根据我的调查，它们不适用于选项卡高度不完全相等并且可能使用 AJAX 更改的情况。

我能想出的最好的解决方案是制作一个<a>链接列表，然后使用每个 URL 的 onclick Javascript 事件来制作它所附加的 div（“tab”）（使用href属性<a>来保存 id您尝试打开的 div），并在 onclick 中更改 div 的显示 CSS 属性（通过更改 className Javascript 属性以显示 1 个 div 并隐藏其他 div）。这样，当您单击列表时，div 变得可见。

Javascript 选项卡有许多现成的实现（大多数 Javascript 库可能都有一个）以及在线教程。实现我上面描述的一个是：here

于 2014-01-13T15:21:01.593 回答