Question

我有一个可滚动的SelectOneListBox，其中包含＆gt; 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>

Answer 1

我解决了这个问题：

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

oncomplete="autoScroll()"

包含此脚本：

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

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

Primefaces ajax SelectOneListBox滚动条在所需位置

1 个答案: