在使用jsf编辑datable中的行时导航到锚点

Question

(使用jsf-2)

我有一个包含一列的dataTable，可以编辑：

        <h:column>
            <f:facet name="header">
                <h:outputText value="Label" style="font-weight: bold">
                </h:outputText>
            </f:facet>
            <h:inputText value="#{m.author2displayed}" rendered="#{m.editable}" size="10"/>
            <h:outputText value="#{m.author2displayed}" rendered="#{not m.editable}"/>
            <h:commandButton value="save edits" rendered="#{m.editable}" onclick="submit()" action ="#{finalCheckBean.saveedits()}"/>
        </h:column>

当我单击“保存编辑”时，我们停留在相同的视图上，这就是期望的效果(finalCheckBean.saveedits()返回null)。

问题:浏览器将所有内容滚动回到页面顶部，而我希望页面保持在刚刚编辑的行的级别显示。我怎样才能做到这一点呢？

Answer 1

如果您已经在使用JSF2，只需在命令按钮中使用<f:ajax>引入一些ajax魔力。将要执行和渲染的组件包装在一个公共组件中，并在<f:ajax>的execute和render中引用它。

<h:column>
    <f:facet name="header">
        <h:outputText value="Label" style="font-weight: bold" />
    </f:facet>
    <h:panelGroup id="author2displayed">
        <h:inputText value="#{m.author2displayed}" rendered="#{m.editable}" size="10"/>
        <h:outputText value="#{m.author2displayed}" rendered="#{not m.editable}"/>
        <h:commandButton value="save edits" rendered="#{m.editable}" onclick="submit()" action="#{finalCheckBean.saveedits()}">
            <f:ajax execute="author2displayed" render="author2displayed" />
        </h:commandButton>
    </h:panelGroup>
</h:column>

这样，滚动位置将保持不变(假设您仍然从操作方法返回null或void )。