Question

有一个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);
    }
}

Answer 1

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

JSF p:dataTable - Scroll to Selected Row

p：selectOneListbox ajax item delete将滚动位置更改为top

1 个答案: