使用filterFunction表示datatable日期范围过滤器

本文介绍了使用filterFunction表示datatable日期范围过滤器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我使用datatable on的素材5.0的filterFunction方法。我想按列标题的日期范围过滤生日。

I use filterFunction method of datatable on primefaces 5.0. I want to filter birthday by date range on column header.

在浏览器控制台上收到此错误：

On browser console I receive this error:

<?xml version="1.0" encoding="utf-8"?><partial-response><error><error-name>java.lang.ClassCastException</error-name><error-message><![CDATA[javax.facesponent.UIPanel cannot be cast to javax.facesponent.ValueHolder]]></error-message></error></partial-response>

Datatable：

Datatable :

<p:dataTable var="person" value="#{testDateRange.persons}" id="personTable" paginator="true" styleClass="customTableStyle" editable="true" rows="10" resizableColumns="true" emptyMessage="No persons" filteredValue="#{testDateRange.filteredPersons}" widgetVar="dateRangeWidget" > <p:column id="nameId" filterBy="name" sortBy="name" filterMatchMode="contains" headerText="Name"> <h:outputText value="#{person.name}" /> </p:column> <p:column id="birthdayId" headerText="birthday" filterBy="birthday" filterFunction="#{testDateRange.filterByDate}"> <f:facet name="filter"> <p:calendar id="from" value="#{testDateRange.dateFrom}" styleClass="customCalendar" pattern="dd/MM/yyyy"> <p:ajax event="dateSelect" oncomplete="PF('dateRangeWidget').filter()" update="personTable"/> </p:calendar> <p:calendar id="to" value="#{testDateRange.dateTo}" styleClass="customCalendar" pattern="dd/MM/yyyy"> <p:ajax event="dateSelect" oncomplete="PF('dateRangeWidget').filter()" update="personTable"/> </p:calendar> </f:facet> <h:outputText value="#{person.birthday}" > <f:convertDateTime pattern="dd/MM/yyyy"/> </h:outputText> </p:column> </p:dataTable>

Bean：

@Component("testDateRange") @Scope("session") public class TestDateRangeBean { private List<Person> persons; List<Person> filteredPersons; private Date dateFrom; private Date dateTo; public TestDateRangeBean() { persons = new ArrayList<>(Arrays.asList( new Person("John", new Date(1357016400000L)), new Person("Will",new Date(1357102800000L)), new Person("Peter",new Date(1414900800000L)), new Person("Cris", new Date(1438747200000L)), new Person("Cemil", new Date(1436068800000L)) )); } public boolean filterByDate(Object value, Object filter, Locale locale) { // it fails before calling this method String filterText = (filter == null) ? null : filter.toString().trim(); if(StringUtils.isEmpty(filterText)) { return true; } if(value == null) { return false; } DateFormat df = new SimpleDateFormat("dd/MM/yyyy"); Date filterDate; try { filterDate = df.parse(filterText); } catch (ParseException e) { return false; } return filterDate.after(dateFrom) && filterDate.before(dateTo); } //all the getters and setters

我有一个简单的POJO Person类，其中包含只有'名'和'生日'。

And I have a simple POJO Person class that contains only 'name' and 'birthday'.

如何按照我在列标题中输入的日期过滤生日。我看到它获取UIPanel组件而不是日期值。 （我假设一个组件有一个值，当它找到两个组件时，它会返回容器组件本身，对不对？）

How can I filter birthday by the dates I enter on column header. I see that it gets the UIPanel component instead of dates values. (I assume it expects one component with a value, and when it finds two components, it returns the container component itself, am I right?)

谢谢

推荐答案

高级解决方案：

JSF：

<p:column headerText="#{msg.date}" sortBy="#{bean.date}" filterBy="#{bean.date}" filterFunction="#{dateRangeFilter.filterByDate}"> <f:facet name="filter"> <h:inputHidden id="filter" /> </f:facet> <f:facet name="header"> <h:outputText value="#{msg.date}" /> <br /> <p:calendar id="from" pattern="dd.MM.yyyy"> <p:ajax event="dateSelect" onstart="$(PrimeFaces.escapeClientId('#{p:component('filter')}'))[0].value = $(PrimeFaces.escapeClientId('#{p:component('from')}_input'))[0].value + '-' + $(PrimeFaces.escapeClientId('#{p:component('to')}_input'))[0].value" oncomplete="PF('dataTable').filter()" /> </p:calendar> <p:calendar id="to" pattern="dd.MM.yyyy"> <p:ajax event="dateSelect" onstart="$(PrimeFaces.escapeClientId('#{p:component('filter')}'))[0].value = $(PrimeFaces.escapeClientId('#{p:component('from')}_input'))[0].value + '-' + $(PrimeFaces.escapeClientId('#{p:component('to')}_input'))[0].value" oncomplete="PF('dataTable').filter()" /> </p:calendar> </f:facet> <h:outputText value="#{bean.date}"> <f:convertDateTime type="date" dateStyle="medium" /> </h:outputText> </p:column>

过滤器Bean：

@Named @ApplicationScoped public class DateRangeFilter implements Serializable { private static final Logger LOG = Logger.getLogger(DateRangeFilter.class.getName()); public boolean filterByDate(Object value, Object filter, Locale locale) { String filterText = (filter == null) ? null : filter.toString().trim(); if (filterText == null || filterText.isEmpty()) { return true; } if (value == null) { return false; } DateFormat df = SimpleDateFormat.getDateInstance(SimpleDateFormat.MEDIUM); Date filterDate = (Date) value; Date dateFrom; Date dateTo; try { String fromPart = filterText.substring(0, filterText.indexOf("-")); String toPart = filterText.substring(filterText.indexOf("-") + 1); dateFrom = fromPart.isEmpty() ? null : df.parse(fromPart); dateTo = toPart.isEmpty() ? null : df.parse(toPart); } catch (ParseException pe) { LOG.log(Level.SEVERE, "unable to parse date: " + filterText, pe); return false; } return (dateFrom == null || filterDate.after(dateFrom)) && (dateTo == null || filterDate.before(dateTo)); } }