Primefaces：在數據表中隱藏/顯示確切的過濾器

Question

我正在創建一個帶有過濾器的數據表，其中使用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()功能的過濾器與適當的selectos

例如：

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

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

檢查它在DataTable - Filtering（在你的瀏覽器開發者工具控制檯）