带有 <p:selectOneMenu> 的全局 <p:datatable> 过滤器将不起作用

Question

我正在尝试在我的 jsf 页面上的数据表上实现全局过滤器。 输入文本过滤器适用于以下代码：

<p:inputText id="globalFilter" onkeyup="examTable.filter();" style="width:200px" />

但是当我对 SelectOneMenu 组件尝试相同的方法时，它不起作用。

我试过这段代码：

<p:selectOneMenu id="state" value="#{examenListBean.stateOption}"onchange="examTable.filter();"> 

      <f:selectItems value="#{examenListBean.etatExamOptions}"/> 

</p:selectOneMenu>

但无济于事。

这是我的 p:datatable 标签：

 <p:dataTable id="tabexam"
              paginatorPosition="bottom"
              var="exam"
              value="#{examenListBean.listexam}"
              widgetVar="examTable"
              emptyMessage="Aucun résultat n'a été trouvé avec les critères donnés"
              filteredValue="#{examenListBean.filteredexams}"
              paginator="true"
              rows="30" 
              paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
              rowsPerPageTemplate="5,10,15,30"
              resizableColumns="true">

Answer 1

我也遇到过同样的问题，而且似乎只是 primefaces 不允许这种类型的事情。我的最终目标是能够将“selectOneMenu”表移出列并将它们放在标题中，但目前这是我所做的。

这是由于 primefaces 似乎访问其结构的方式使它们为过滤器做好准备。

我所做的是创建了一个 id = 'globalFilter' 的“隐藏” p:inputText 字段，并使 id display:none...

然后创建了 2 个搜索字段（一个使用 selectOneMenu，一个仅使用 inputText 字段）。 然后使用这些类型的 onchange 或 onkeyup 函数调用我的 javascript 函数，这些函数使用 jQuery 将隐藏字段更新为所选值，然后调用 crpTable 功能。

<script type="text/javascript">

        function doFilter1()
        {
            $("#globalFilter").val($("#globalFilter1").val());
            widgetVarTableId.filter();
        };
        function doFilter2()
        {
            $("#globalFilter").val($("#globalFilter2").val());
            widgetVarTableId.filter();
        };

</script>

<style>
   .myGlobalFilter {
      display:none;       
   }

</style>

在我的 f:facet name=Header 我有

<p:inputText id="globalFilter" styleClass="myGlobalFilter"/>

<h:outputText value="filter one: "/>
<h:selectOneMenu id="globalFilter1" onchange="doFilter1();">
   <f:selectItems value="#{formBean.filterOptions}" />
</h:selectOneMenu>

<h:outputText value="filter two: "/>
<p:inputText id="globalFilter2" onkeyup="doFilter2();">

这可以按我的预期工作.. 但是使用 primefaces .filter()- 的缺点是您不能将其更改为“精确”“startsWith”等，它总是“包含”而不修改 PF 源代码。

希望这会有所帮助！

Answer 2

尝试在服务器端进行过滤：

<p:selectOneMenu id="state" value="#{examenListBean.stateOption}"> 
            <f:selectItems value="#{examenListBean.etatExamOptions}"/> 
            <p:ajax event="change" process="@this" listener="#{myBean.filteringMethod}" update=":absPath:tabexam"/>
</p:selectOneMenu>

不知道您的 JavaScript 方法长什么样，也许可以尝试使用 <p:remoteCommand> 并在那里更新您的表格。