primefaces数据表筛选器selectCheckboxMenu与bootsfaces

Z时代
2024-01-10
分类：问答

我正在使用bootsfaces与bootsfaces数据表，并且存在CSS冲突，我想解决这个问题。primefaces数据表筛选器selectCheckboxMenu与bootsfaces

实现从primefaces过滤器例子展示：

http://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml

给了我这样的结果： datatable filter example good

然而，加入bootsfaces组件到页面，如（唯一的变化是添加一个空<b:inputtext>元素）：

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:h="http://xmlns.jcp.org/jsf/html" 
     xmlns:f="http://xmlns.jcp.org/jsf/core" 
     xmlns:b="http://bootsfaces.net/ui" 
     xmlns:p="http://primefaces.org/ui"> 
    <h:head> 
     <title>Facelet Title</title> 
    </h:head> 
    <h:body> 
     <h:form> 
      <b:inputText></b:inputText> 
      <p:dataTable var="car" value="#{dtFilterView.cars}" widgetVar="carsTable" 
         emptyMessage="No cars found with given criteria" filteredValue="#{dtFilterView.filteredCars}"> 
       <f:facet name="header"> 
        <p:outputPanel> 
         <h:outputText value="Search all fields:" /> 
         <p:inputText id="globalFilter" onkeyup="PF('carsTable').filter()" style="width:150px" placeholder="Enter keyword"/> 
        </p:outputPanel> 
       </f:facet> 
       <p:column filterBy="#{car.id}" headerText="Id" footerText="contains" filterMatchMode="contains"> 
        <h:outputText value="#{car.id}" /> 
       </p:column> 
       <p:column filterBy="#{car.year}" headerText="Year" footerText="lte" filterMatchMode="lte"> 
        <f:facet name="filter"> 
         <p:spinner onchange="PF('carsTable').filter()" styleClass="year-spinner"> 
          <f:converter converterId="javax.faces.Integer" /> 
         </p:spinner> 
        </f:facet> 
        <h:outputText value="#{car.year}" /> 
       </p:column> 
       <p:column filterBy="#{car.brand}" headerText="Brand" footerText="exact" filterMatchMode="exact" filterStyle="width: 100px"> 
        <f:facet name="filter"> 
         <p:selectOneMenu onchange="PF('carsTable').filter()" > 
          <f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true" /> 
          <f:selectItems value="#{dtFilterView.brands}" /> 
         </p:selectOneMenu> 
        </f:facet> 
        <h:outputText value="#{car.brand}" /> 
       </p:column> 
       <p:column filterBy="#{car.color}" headerText="Color" footerText="in" filterMatchMode="in" filterStyle="margin-bottom 0px"> 
        <f:facet name="filter"> 
         <p:selectCheckboxMenu label="Colors" onchange="PF('carsTable').filter()" panelStyle="width:125px" scrollHeight="150"> 
          <f:selectItems value="#{dtFilterView.colors}" /> 
         </p:selectCheckboxMenu> 
        </f:facet> 
        <h:outputText value="#{car.color}" /> 
       </p:column> 
       <p:column filterBy="#{car.sold}" headerText="Status" footerText="equals" filterMatchMode="equals"> 
        <f:facet name="filter"> 
         <p:selectOneButton onchange="PF('carsTable').filter()"> 
          <f:converter converterId="javax.faces.Boolean" /> 
          <f:selectItem itemLabel="All" itemValue="" /> 
          <f:selectItem itemLabel="Sold" itemValue="true" /> 
          <f:selectItem itemLabel="Sale" itemValue="false" /> 
         </p:selectOneButton> 
        </f:facet> 
        <h:outputText value="#{car.sold ? 'Sold': 'Sale'}" /> 
       </p:column> 
       <p:column filterBy="#{car.price}" headerText="Price" footerText="custom (min)" filterFunction="#{dtFilterView.filterByPrice}"> 
        <h:outputText value="#{car.price}"> 
         <f:convertNumber currencySymbol="$" type="currency"/> 
        </h:outputText> 
       </p:column> 
      </p:dataTable> 
     </h:form> 
    </h:body> 
</html>

给出了此结果： primefaces datatable filter style error

过滤器的下拉框的边距已更改，导致向下的箭头未处于正确的位置。文字也减少到0.85。

有没有一种方法可以将bootsfaces与primefaces数据表相结合并保持primefaces下拉菜单的格式？

回答：

这不是很完美，但添加的CSS这几行代码使BootsFaces版本看起来几乎完全像原来的，只有PrimeFaces版本：

<h:head> 
    <title>Facelet Title</title> 
    <style> 
    .ui-widget { 
     font-size: 17.6px !important; 
    } 
    * { 
     -webkit-box-sizing: content-box !important; 
     -moz-box-sizing: content-box !important; 
     box-sizing: content-box !important; 
    } 
    *:before, *:after { 
     -webkit-box-sizing: content-box !important; 
     -moz-box-sizing: content-box !important; 
     box-sizing: content-box !important; 
    } 
    body { 
     margin: 8px !important; 
    } 
    </style> 
    </h:head>

然而，大多数的这些设置会影响BootsFaces组件。将字体大小设置为0.85几乎可以肯定是BootsFaces中的一个错误，我们将解决这个问题，但其他设置看起来像重置浏览器CSS默认设置的不同方法。换句话说：修复复杂PrimeFaces组件的外观可能会破坏BootsFaces组件的外观和感觉。

回答：

谢谢斯蒂芬 - 伟大的工作在bootsfaces顺便说一句，这是一个非常有趣的编程。

您的更改与我系统上的primefaces示例并不完全匹配，但它们是一个改进，并让我深入了解如何进行自己的更改。

使用这些样式替代工作更好地在我的系统：

<style> 
     .ui-widget { 
      font-size: 16px !important; 
     } 
     .ui-selectcheckboxmenu-label { 
      margin-bottom: 0px; 
     } 
     .ui-selectcheckboxmenu-trigger { 
      width: auto !important; 
     } 
     .ui-selectonemenu-trigger { 
      width: auto !important;     
     } 
     .ui-selectcheckboxmenu-label { 
      font-weight: normal !important; 
     } 
     label{ 
      font-weight: normal !important;     
     } 
     body { 
      line-height: 18px !important; 
     } 
</style>