p:selectOneListbox ajax 项目选择更改滚动位置

Question

有一个 <p:selectOneListbox> 大约有 20 个项目。可以在列表中查看前 5 个项目，然后可以滚动并选择其余项目。该列表已 ajax 化。 When the item numbers greater than 5 is selected (after scrolling to it) the scrollbar does not remain at its place;它移动到顶部位置。这会使所选项目（例如项目 9）不可见。该程序使用 ajax 侦听器。该应用程序使用 PrimeFaces 5.0。

但是，当删除 ajax 侦听器时，所选（第 9 项）可见并且滚动条不会移动到顶部（在下面的 JSF 页面中删除 p:ajax 标记的侦听器属性） .

我想知道在使用 ajax 侦听器时如何使滚动条不移动。

JSF 页面：

<p:selectOneListbox id="list"
                    scrollHeight="100"
                    value="#{bean.todo}">

    <f:selectItems value="#{bean.data}"
                   var="t"
                   itemLabel="#{t.name}"
                   itemValue="#{t.name}"/>

    <p:ajax process="@this"
            update="@this msg"
            listener="#{bean.valueChanged}" />
</p:selectOneListbox>

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

bean 的代码：

import javax.faces.bean.*;
import java.io.Serializable;
import java.util.*;
import javax.faces.event.AjaxBehaviorEvent;
import javax.faces.component.UIOutput;

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

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

    public TodosBean() {
        loadData();
        if (data.size() == 0) {
            return;
        }

        Todo t = data.get(0);
        String name = t.getName();
        setTodo(name); // select the first item in the list
        setMessage(name);
    }

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

    public List<Todo> 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 name = (String) ((UIOutput) e.getSource()).getValue();
        setMessage(name + " selected.");
    }
}

public class Todo {

    private String name;
    private String desc;

    public Todo() {}

    public Todo(String name, String desc) {
        this.name = name;
        this.desc = desc;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getDesc() {
        return desc;
    }

    public void setDesc(String desc) {
        this.desc = desc;
    }

    @Override
    public String toString() {
        return this.name;
    }
}

Answer 1

删除 update="@this 即可解决。更新控件会将其移至默认状态。也可能是在较新版本的 PF 中，这个默认状态得到了改进，并且它仍然处于正确的位置

p:selectOneListbox ajax 项目选择更改滚动位置

p:selectOneListbox ajax item selection changes scroll position

ajax

jsf

primefaces

selectonelistbox