Question

我使用JSF + Primefaces 3.2.1。

页面上有一个 p：datatable ，每行都有一个按钮＆＃34;编辑＆＃34;。当我单击该按钮时，在页面的页脚中呈现一个用于编辑该行的表单。然后我需要向下滚动来改变值..

但是我需要浏览器在点击＆＃34;编辑＆＃34;后自动滚动到那里。基本HTML工作中的锚点按钮。

我找到了这个决定：

FacesContext.getCurrentInstance().getExternalContext().redirect("pProvidersPriceAppointment.xhtml#anchor1");

它有效，但是我的更新=＆＃34; @表格＆＃34; 无法正常工作..因此底部的表单无法呈现。它在刷新页面后呈现。

如何使用 p：commandButton 或 h：commandButton 进行此操作？）

我的按钮：

<p:commandButton id="providerEdit" actionListener="#{providersPriceAppointment.setEditProvider(provider.id)}" icon="iconEdit" update="@form"/>

Bean方法：

public void setEditProvider(int id) throws IOException {
    for (int i = 0; i < providersList.size(); i++) {
        ProvidersExt p = providersList.get(i);
        if (p.getId() == id) {
            providerForEdit = p;
            break;
        }
    }
    enableEdit = true;
    FacesContext.getCurrentInstance().getExternalContext().redirect("pProvidersPriceAppointment.xhtml#anchor1");
}

页脚中的表单：

<a name="anchor1"/>
<p:fieldset id="editFieldset" legend="blablabla" rendered="#{providersPriceAppointment.enableEdit}"/>
    ...
</p:fieldset>

Answer 1

在JSF或Primefaces中还没有实现这样的东西。但是，由于您在应用程序（Primefaces）中运行了jQuery Framework，因此可以使用jQuery Animate功能。

要获得有关如何实现此类内容的提示，您可以查看以下答案：

jQuery scroll to Element

对于你的应用程序，就像那样：

将此添加到您的<head>元素：

function scrollToAnchor() {
    jQuery('html, body').animate({
        scrollTop: jQuery("#editFieldset").offset().top
    }, 2000);
}

这就是按钮部分：

<p:commandButton id="providerEdit" 
    actionListener="# {providersPriceAppointment.setEditProvider(provider.id)}" 
    icon="iconEdit" onComplete="scrollToAnchor();" update="@form"/>

Answer 2

使用PrimeFaces RequestContext和scrollTo来定位组件ID：

https://www.primefaces.org/showcase/ui/misc/requestContext.xhtml

public void save() { 
    RequestContext context = RequestContext.getCurrentInstance();

    ...
    //scroll to panel
    context.scrollTo("form:panel");

Answer 3

我在PrimeFaces ShowCase上找到的简单决定：

<p:fieldset id="edit" legend="Here you can edit.." rendered="#{providersPriceAppointment.enableEdit}">
    <p:focus context="panel"/>  
</p:fieldset>

渲染此字段集时，浏览器只需跳转到此处） https://www.primefaces.org/showcase/ui/misc/focus.xhtml

希望，有人会发现这有用（＆＃34;，）

在JSF中锚/跳转

3 个答案: