Question

我正在创建一个带过滤器的dataTable，其中可以使用selectBooleanButton显示/隐藏过滤器。我可以隐藏文本过滤器，但“精确”过滤器的选择框不会隐藏。代码如下。我将不胜感激任何帮助。

<p:dataTable id="orgs" var="id" widgetVar="idTable"
value="#{orgList.ids}" rows="10"
rowKey="#{id.idPk}"
paginator="true" paginatorPosition="top" 
selectionMode="single" 
selection="#{orgList.selectedOrg}"
filteredValue="#{orgList.filteredValues}"
>

<f:facet name="header">
    <p:toolbar id="orgListToolbar">
        <p:toolbarGroup align="right">
            <p:selectBooleanButton value="#{orgList.showFilter}" onIcon="myfilter" offIcon="ui-icon-minusthick" onLabel="F" offLabel="F">
                <p:ajax update="orgs" oncomplete="idTable.clearFilters()"/>
            </p:selectBooleanButton>
        </p:toolbarGroup>
    </p:toolbar>
</f:facet>


<p:column sortBy="#{id.id}" headerText="Id" filterBy="#{id.id}" filterStyle="#{orgList.showFilter?'':'display: none; visibility: hidden;'}">
    <h:outputText value="#{id.id}" />
</p:column>
<p:column sortBy="#{id.idCls.clsName}" headerText="Id Type"             
        filterBy="#{id.idCls.clsName}" filterMatchMode="exact" filterOptions="#{commonLists.selectItemIdClses}" 
        filterStyle="#{orgList.showFilter?'':'display: none; visibility: hidden;'}" >
    <h:outputText value="#{id.idCls.clsName}" />
</p:column>

Answer 1

这是因为Primefaces会覆盖您的filterStyle

您可以执行以下操作：

在自定义css文件中添加以下内容（id是您的表ID）

#id .ui-column-filter{
 display:none;
}

确保你最后包含你的css ......（你可以在身体中加载css）这样

<h:body>
    <h:outputStylesheet library="css" name="myCssFile.css" target="head" />

请注意，display: none;已足够，根本不需要visibility: hidden;

为了隐藏/显示过滤器，您可以使用带有正确选择的jQuery .hide() / .show()函数

例如：

$("#form\\:dataTable th select").hide();//.show

$("#form\\:dataTable th input").hide();//.show

在DataTable - Filtering（在浏览器开发者工具的控制台中）中查看

Answer 2

隐藏jsf数据表中列标题中的过滤器

filterStyle =“ display：none”

它将隐藏过滤器列

Answer 3

最简单的解决方案是定义自己的样式，并用！important覆盖该值。

        <style type="text/css">
            .ui-column-filter{
                display:none !important;
            }
        </style>

Primefaces：隐藏/显示数据表中的精确过滤器

3 个答案: