PrimeFaces dataTable:如何捕获每页行事件? [英] PrimeFaces dataTable: how to catch rows-per-page event?

问题描述

我创建了一个 PrimeFaces 数据表:

I cretated a PrimeFaces dataTable:

<p:dataTable id="locationTable" value="#{bean.object}" var="item"
  paginator="true"
  rows="10" 
  paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink}{LastPageLink} {RowsPerPageDropdown}" 
  rowsPerPageTemplate="5,10,15,20,30,50,100">
  ...
</p:dataTable>

我想保存每页行的下拉框值.当用户更改值时，我将如何捕获事件?因此，我可以读取并保存5,10,15,20,30,50,100"值之一，以便在用户下次返回此页面时自动出现.目前，它没有被保存，所以每次(重新)加载页面时，它都会回到默认值10".

I'd like to save the dropdown box value for rows-per-page. When the user changes the value, how would I catch the event? So I can read and save one of the "5,10,15,20,30,50,100" values in order for this to apear automatically next time the user comes back to this page. Currently, it is not saved, so every time the page is (re)loaded, it goes back to default value of "10".

推荐答案

你可以这样做:

视图

<h:form id="mainForm">

    <p:dataTable id="locationTable" value="#{datatableBean.list}" var="item"
                 paginator="true" widgetVar="dtVar"
                 rows="#{datatableBean.rows}" 
                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                 rowsPerPageTemplate="1,2,3,4,5,6">
        <p:column>
            #{item.name}
        </p:column>
    </p:dataTable>

    <p:remoteCommand name="persistRows" action="#{datatableBean.saveRows}" process="@this" 
                     update="rows" global="false" />

    <h:outputText id="rows" value="#{datatableBean.rows}" />

    <script>
        jQuery(document).ready(function() {
            dtVar.paginator.rppSelect.change(function() {
                persistRows([{name: 'rows', value: this.value}]);
            });
        });
    </script>
</h:form>

豆子

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped
public class DatatableBean implements Serializable {

    private int rows;

    private List<SimpleBean> list;

    @PostConstruct
    public void setup() {
        //default rows value
        rows = 2;

        list = new ArrayList<SimpleBean>();
        //ID and Name
        list.add(new SimpleBean(11, "A"));
        list.add(new SimpleBean(22, "B"));
        list.add(new SimpleBean(33, "C"));
    }

    public void saveRows(){
        FacesContext context = FacesContext.getCurrentInstance();
        Map map = context.getExternalContext().getRequestParameterMap();
        String rowsStr = (String) map.get("rows");
        rows = Integer.parseInt(rowsStr);
    }

    public int getRows() {
        return rows;
    }

    public void setRows(int rows) {
        this.rows = rows;
    }

    public List<SimpleBean> getList() {
        return list;
    }

    public void setList(List<SimpleBean> list) {
        this.list = list;
    }

}

此处的策略是扩展与分页器呈现的 html select 标记关联的 onchange 事件.为了完成这项任务，我在数据表 (dtVar) 中设置了 wigetVar，知道它是客户端 api 通过 dtVar.paginator.rppSelect 为我们提供了两个选择.

The strategy here is to extend the onchange event associated with the html select tags rendered by the paginator. To facilitate that task, I've set the wigetVar in the datatable (dtVar) knowing that it's clientside api gives us both selects through dtVar.paginator.rppSelect.

现在，为了能够将这些选择的值发送到托管 bean，我们可以使用 remoteCommand.使用 remoteCommand 组件，我们可以将 javascript 参数发送到托管 bean.我将 remoteCommand 命名为 persistRows 并通过调用它我使用组件所需的模式指定了额外的参数:[{name: 'rows', value: this.value}] ([{name: 'nameOfTheVariable', value: 'valueOfTheVariable'}]).

Now, to be able to send the value on those selects to the managed bean, we can use a remoteCommand. Using the remoteCommand component we can send javascript parameters to a managedbean. I've named the remoteCommand as persistRows and by calling it I've specified the extra parameters using the pattern required by the component: [{name: 'rows', value: this.value}] ([{name: 'nameOfTheVariable', value: 'valueOfTheVariable'}]).

现在您可以使用该行属性做任何您想做的事情.

Now you can do whatever you want to do with that rows attribute.

这篇关于PrimeFaces dataTable:如何捕获每页行事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！