JSF中的Anchor/JumpTo [英] Anchor/JumpTo in JSF
问题描述
我使用JSF + Primefaces 3.2.1.
I use JSF + Primefaces 3.2.1.
页面上有一个 p:datatable ，在每一行中都有编辑"按钮.当我单击该按钮时，在页面的页脚中将呈现一个用于编辑该行的表单.然后，我需要向下滚动以更改值.
There is an p:datatable on the page, in each row I have button "Edit". When I click that button, in the footer of the page renders a form for editing that row. Then I need to scroll down there to change values..
但是，我需要浏览器在基本HTML作品中点击"锚点"之类的编辑"按钮后，自动在此处滚动.
But I need the browser to scroll there automatically after clicking on "Edit" button like Anchors in basic HTML work.
我找到了这个决定:
FacesContext.getCurrentInstance().getExternalContext().redirect("pProvidersPriceAppointment.xhtml#anchor1");
它可以工作，但是我的 update ="@ form" 不能工作..因此，底部的表单无法呈现.刷新页面后呈现.
It works, but with that my update="@form" not working.. So the form in the bottom not renders. It renders after refreshing page.
如何使用 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>
推荐答案
在JSF或Primefaces中还没有实现这种功能.但是，由于您的应用程序(Primefaces)中运行着jQuery框架，因此可以使用jQuery Animate功能.
There isn't something like this implemented in JSF or Primefaces yet. But since you have the jQuery Framework running in your application (Primefaces), you could use the jQuery Animate features.
要获得有关如何实现类似功能的提示，可以查看以下答案:
To get a Hint on how to realize something like this, you could check out this answer:
对于您的应用程序来说，是这样的:
For your application that would be somehow like that:
将此添加到您的<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"/>
这篇关于JSF中的Anchor/JumpTo的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
