0

有大约 20 个项目的 ap:selectOneListbox。可以在列表中查看前 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}" />

豆代码：

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);
    }
}
4

1 回答 1

0

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

JSF p:dataTable - 滚动到选定行

于 2015-06-11T10:37:41.727 回答