Primefaces ajax SelectOneListBox 滚动条在所需位置

Question

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

添加-保存按钮和列表框已 ajax 化。我正在使用 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>

Answer 1

我用这个解决了这个问题：

将其添加到命令按钮的 p:ajax 标签中：

oncomplete="autoScroll()"

包含此脚本：

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

当我点击添加-保存按钮时，新项目被添加到列表项目的底部并滚动到列表底部。滚动条移动到指定的 scrollPos。由于添加到列表的项目是最后一行，所以我使用了比要求更大的滚动位置。这行得通。

Primefaces ajax SelectOneListBox 滚动条在所需位置

Primefaces ajax SelectOneListBox scrollbar at desired position

ajax

primefaces

selectonelistbox