2

我有一个可滚动的 SelectOneListBox，其中包含 >50 个项目。当一个新项目被添加-保存时，它被附加为最后一行，位于当前可视区域之外。我需要列表框自动滚动到新添加的行（已选中）。

添加保存按钮和列表框是ajaxified。我正在使用 Primefaces 5.0。我怎样才能做到这一点？

JSF 页面代码：

<p:commandButton title="Save" icon="ui-icon ui-icon-disk" >
  <p:ajax process="name desc @this"
  update="list msg"
  listener="#{bean.saveListener}"/>
</p:commandButton>

<p:selectOneListbox id="list" scrollHeight="120"
  value="#{bean.selectName}">
  <f:selectItems value="#{bean.data}" var="b" 
  itemLabel="#{b.desc}" itemValue="#{b.name}"/>
  <p:ajax process="@this" update="@this name desc msg"
  listener="#{bean.valueChanged}"/>         
</p:selectOneListbox>
4

1 回答 1

2

我解决了这个问题：

将此添加到命令按钮的 p:ajax 标记中：

oncomplete="autoScroll()"

包括这个脚本：

function autoScroll() {
  var scrollPos = 400;
  jQuery('#fm\\:list .ui-selectlistbox-listcontainer').animate( {scrollTop:scrollPos});
}

当我单击添加保存按钮时，新项目被添加到列表项的底部并滚动到列表的底部。滚动条移动到指定的滚动位置。由于添加到列表中的项目是最后一行，因此我使用了大于所需的滚动位置。这行得通。

于 2015-03-31T07:35:37.223 回答