Primefaces DataTable的“全部显示”按钮

问题描述 投票:2回答:2

我想为一个primefaces数据表设置一个'Show All'按钮,但是,我遇到了一些麻烦。这里有一些测试代码可以解决这个问题:

Test.xhtml:

          ...  
            <h:form>
                <p:selectBooleanCheckbox value="#{testBean.showAll}" itemLabel="Show All">
                    <p:ajax update="@form"/> 
                </p:selectBooleanCheckbox>

                <p:panel id="test">
                    <p:dataTable id="values" var="value" value="#{testBean.fullList}" filteredValue="#{testBean.filteredList}" paginatorAlwaysVisible="false" 
                                 paginator="#{!testBean.showAll}" rows="#{!testBean.showAll ? 2 : null }" widgetVar="valuesTable"
                                 emptyMessage="No records found.">


                        <p:column id="enum" sortBy="#{value.toString()}" filterBy="#{value.toString()}" filterMatchMode="contains">
                            <f:facet name="header">
                                <h:outputText value="Enum" />
                            </f:facet>
                            <h:outputText value ="#{value.toString()}"/>
                        </p:column>
                        <p:column id="name" sortBy="#{value.name}"  filterBy="#{value.name}" filterMatchMode="contains">
                            <f:facet name="header">
                                <h:outputText value="Name" />
                            </f:facet>
                            <h:outputText value="#{value.name}" />
                        </p:column>
                    </p:dataTable>
                </p:panel>
            </h:form>
          ...

这是TestBean.java:

import javax.inject.Named;
import javax.enterprise.context.SessionScoped;
import java.io.Serializable;
import java.util.Arrays;
import java.util.List;

@Named(value = "testBean")
@SessionScoped
public class TestBean implements Serializable {

    public static enum Value {

        ONE, TWO, THREE;

        public String getName() {
            return name().toLowerCase();
        }

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

    /**
     * Creates a new instance of TestBean
     */
    public TestBean() {
    }

    private boolean showAll = false;
    private List<Value> fullList = Arrays.asList(Value.values());
    private List<Value> filteredList;

    public boolean isShowAll() {
        return showAll;
    }

    public void setShowAll(boolean showAll) {
        this.showAll = showAll;
    }

    public List<Value> getFullList() {
        return fullList;
    }

    public void setFullList(List<Value> fullList) {
        this.fullList = fullList;
    }

    public List<Value> getFilteredList() {
        return filteredList;
    }

    public void setFilteredList(List<Value> filteredList) {
        this.filteredList = filteredList;
    }

}

如果我不更改选项卡,页面将按预期工作:切换“全部显示”按钮会更新表以显示所有3个值,或仅显示两个值。但是,如果未选中show all(仅显示2行),并且单击表格的第2页以查看第三条记录,然后单击“全部显示”,则表格无法正确更新。它从表的顶部删除了paginator(如预期的那样),但仍然只显示第3条记录。如果我取消选中show all并导航回数据表的第一页,它现在也会被破坏。

我已经尝试将ajax update语句更改为表的id,但这并没有改变结果。

难道我做错了什么?提前致谢。

java primefaces
2个回答
2
投票

您必须以编程方式直接在DataTable组件上设置所需的值(为了更具可读性,我使用了显式的firstrows bean属性):

<h:form>
    <p:selectBooleanCheckbox value="#{testBean.showAll}" itemLabel="Show All">
        <p:ajax update="@form" />
    </p:selectBooleanCheckbox>

    <p:panel id="test">
        <p:dataTable id="values" var="value" value="#{testBean.fullList}"
            filteredValue="#{testBean.filteredList}" paginatorAlwaysVisible="false"
            paginator="#{!testBean.showAll}" first="#{testBean.first}" rows="#{testBean.rows}"
            widgetVar="valuesTable" emptyMessage="No records found.">


            <p:column id="enum" sortBy="#{value.toString()}" filterBy="#{value.toString()}"
                filterMatchMode="contains">
                <f:facet name="header">
                    <h:outputText value="Enum" />
                </f:facet>
                <h:outputText value="#{value.toString()}" />
            </p:column>
            <p:column id="name" sortBy="#{value.name}" filterBy="#{value.name}"
                filterMatchMode="contains">
                <f:facet name="header">
                    <h:outputText value="Name" />
                </f:facet>
                <h:outputText value="#{value.name}" />
            </p:column>
        </p:dataTable>
    </p:panel>
</h:form>

@Named
@ViewScoped
public class TestBean implements Serializable
{
    private static final long serialVersionUID = 1L;

    public static enum Value
    {
        ONE, TWO, THREE;

        public String getName()
        {
            return name().toLowerCase();
        }

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

    private boolean showAll = false;
    private int first = 0;
    private int rows = 2;
    private List<Value> fullList = Arrays.asList(Value.values());
    private List<Value> filteredList;

    public boolean isShowAll()
    {
        return showAll;
    }

    public void setShowAll(boolean showAll)
    {
        this.showAll = showAll;
        first = 0;
        rows = showAll ? 0 : 2;
        filteredList = null;

        // get the FacesContext instance
        FacesContext context = FacesContext.getCurrentInstance();

        // get the current component (p:selectBooleanCheckbox)
        UIComponent component = UIComponent.getCurrentComponent(context);

        // find DataTable within the same NamingContainer
        DataTable table = (DataTable) component.findComponent("values");

        // reset first row index
        table.setFirst(first);

        // reset last row index
        table.setRows(rows);

        // reset filterd value
        table.setFilteredValue(null);
    }

    // all other getters/setters
}

使用JSF 2.3.0-m06(Mojarra)和PrimeFaces 6.0.2在Wildfly 10.0.0.Final上测试


0
投票

我有同样的问题,通过这个步骤解决了:

1)将样式Class =“all-pagination”添加到datatable

<p:dataTable id="values" var="value" value="#{testBean.fullList}"
            filteredValue="#{testBean.filteredList}" styleClass="all-paginator"..>

2)在控制器(TestBean.java)中添加一个包含所有记录数的getter,如:

public int getRecordNumber() {
    if(CollectionUtils.isEmpty(fullList)){
        return 0;
    }
    return fullList.size();
}

3)在datatable属性“rowsPerPageTemplate”的末尾添加recordNumber的属性

<p:dataTable id="values" var="value" value="#{testBean.fullList}" filteredValue="#{testBean.filteredList}" 
styleClass="all-paginator" rowsPerPageTemplate="20,30,40,50,#{testBean.recordNumber}"..>

希望这有助于任何人有同样的问题!

© www.soinside.com 2019 - 2024. All rights reserved.