代码之家  ›  专栏  ›  技术社区  ›  prasad_

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

  •  1
  • prasad_  · 技术社区  · 11 年前

    有一个 <p:selectOneListbox> 大约有20个项目。可以在列表中查看前5个项目,然后可以滚动并选择其余项目。这份名单被夸大了。当选择大于5的项目编号时(滚动到该项目编号后),滚动条不会保留在其位置;它移动到顶部位置。这将使所选项目(例如项目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;
        }
    }
    
    1 回复  |  直到 11 年前
        1
  •  2
  •   Kukeltje    11 年前

    删除 update="@this 将解决此问题。更新控件将使其变为默认状态。也可能是在PF的更新版本中,此默认状态得到了改进,并且仍然处于正确的位置