p:selectOneListbox ajax 项目删除将滚动位置更改为顶部答案

【问题标题】：p:selectOneListbox ajax item delete changes scroll position to topp:selectOneListbox ajax 项目删除将滚动位置更改为顶部
【发布时间】：2015-04-02 07:35:19
【问题描述】：

有一个 p:selectOneListbox 大约有 20 个项目。可以在列表中查看前 5 个项目，然后可以滚动选择其余项目。该列表是ajaxified。选择一个列表项，然后单击 ajax 删除按钮，该项目被删除并选择以下项目。这工作正常。但是，列表的滚动条移动到顶部，并且新选择的项目不可见 - 当索引大于 5 的项目时。该应用使用 PrimeFaces 5.1。

我还尝试使用 Apache MyFaces 2.0 进行此操作 - 使用 f:ajax、h:selectOneListbox 和 h:commandButton 而不是各自的 p: 标签。托管 bean 代码保持不变。在这种情况下，它工作正常 - 滚动条不会移动到顶部（只是根据需要进行调整）。我想要 Primefaces 标签的类似行为。

JSF页面代码：

<p:selectOneListbox id="list" scrollHeight="100"
    value="#{bean.todo}">
    <f:selectItems value="#{bean.data}" />
    <p:ajax process="@this" update="msg"
    listener="#{bean.valueChanged}" />
</p:selectOneListbox>

<br />
<p:commandButton value="Delete">
    <p:ajax process="@this" update="list msg"
    listener="#{bean.deleteListener}"/>
</p:commandButton>

<br /><br /><h:outputText id="msg" value="#{bean.message}" />

bean 代码：

package example;

import javax.faces.bean.SessionScoped;
import javax.faces.bean.ManagedBean;
import java.io.Serializable;
import java.util.List;
import java.util.ArrayList;
import javax.faces.event.AjaxBehaviorEvent;
import javax.faces.component.UIOutput;

@ManagedBean(name="bean")
@SessionScoped
public class TodosBean implements Serializable {

    private List<String> data;
    private String todo; // selected item value
    private String msg;

    public TodosBean() {
        loadData();
        String t = data.get(0);
        setTodo(t); // select the first item in the list
        setMessage(t);
    }

    private void loadData() {
        data = new ArrayList<>();        
        data.add("1first");
        data.add("2second");
        data.add("3third");
        data.add("4fourth");
        data.add("5fifth");
        data.add("6sixth");
        data.add("7seventh");
        data.add("8eighth");
        data.add("9ninth");
        data.add("10tenth");
    }

    public List<String> getData() {
        return data;
    }

    public void setMessage(String msg) {
        this.msg = msg;
    }
    public String getMessage() {
        return msg;
    }

    public String getTodo() {
        return todo;
    }
    public void setTodo(String t) {
        todo = t;
    }

    public void valueChanged(AjaxBehaviorEvent e) {
        String t = (String) ((UIOutput) e.getSource()).getValue();
        setMessage(t + " selected.");
    }

    public void deleteListener(AjaxBehaviorEvent e) {
        if (data.size() == 0) {
            return;
        }
        String t = getTodo();
        setMessage(t + " deleted.");
        int ix = data.indexOf(t);
        data.remove(t);
        // select an item
        if (data.size() == 0) {
             setTodo("");
             return;
        }
        if (ix == data.size())  {
             ix = ix - 1;
        }
        t = data.get(ix);
        setTodo(t);
    }
}

【问题讨论】：

正如您在其他相关帖子中所建议的：尝试过更新版本？
感谢您的回复。我使用的是 5.1 版而不是 5.0 版。
在您的帖子中您说您已经使用 5.1。但现在可以了吗？
存在本帖上述问题。
但是删除更新后，是不是选中了服务器端的东西（比如之前的元素？），如果没有，“滚动到顶部”是完全正常的……

标签： ajax jsf primefaces scroll selectonelistbox

【解决方案1】：

以下是一篇关于滚动到 p:dataTable 中选定行的文章。表中的项目已排序。在添加、更新或删除之后，滚动条滚动到选定的项目 - 并且选定的项目是可见的。文中提到的jQuery脚本也可以应用于p:selectOneListBox。

JSF p:dataTable - Scroll to Selected Row

【讨论】：