Primefaces 数据表筛选 header 中的特定列

Question

在Primefaces数据表中，可以通过以下代码过滤特定的列：

<p:column filterBy="#{car.id}" headerText="Id" filterMatchMode="contains">
    <h:outputText value="#{car.id}" />
</p:column>

上面的代码将在列的 header 上生成一个过滤器。我想要的是在数据表的 header 上创建一个过滤器，而不是列。来自ShowCase，有一个代码：

<f:facet name="header">
    <p:outputPanel>
        <h:outputText value="Search all fields:" />
        <p:inputText id="globalFilter" onkeyup="PF('carsTable').filter()"/>
    </p:outputPanel>
</f:facet>

这会在数据表的header中放置一个过滤器，但是它会过滤数据表的所有字段，这是我不想要的，我希望它只过滤特定的列，是吗可能吗？

Answer 1

您可以使用一些技巧。首先为您的 p:dataTable 添加一个 widgetVar 属性，例如 widgetVar="myTable"。然后，给你加一个id属性p:column:

<p:column filterBy="#{car.id}"
          headerText="Id"
          filterMatchMode="contains"
          id="clm">
  <h:outputText value="#{car.id}" />
</p:column>

您可以使用此 ID select 列筛选字段。在全局过滤器中，您想要删除 id 属性，并添加一个 onkeyup 侦听器，该侦听器设置列过滤器中的输入值并使用 [=13 在 table 上触发过滤=].

<f:facet name="header">
  <p:inputText onkeyup="document.getElementById('frm:tbl:clm:filter').value=this.value; PF('myTable').filter();"/>
</f:facet>

这里我假设您的表单的 ID 为 frm，您的数据 table 的 ID 为 tbl。他们可能有不同的 ID，因此相应地更改代码。

如果您不希望过滤器在列中可见，您可以使用 CSS 规则将其隐藏：

.ui-datatable .ui-column-filter[id='frm:tbl:clm:filter'] {
  display: none;
}

如果您正在使用延迟加载，您还可以查看 Primefaces lazy datatable: put my own filter instead of GlobalFilter

Primefaces 数据表筛选 header 中的特定列

Primefaces datatable filter specific column in header

primefaces

jsf-2