问题：

primefaces数据表过滤器选择复选框菜单和引导面

浦出野

2023-03-14

我将primefaces数据表与bootsfaces一起使用，我想解决一个CSS冲突。

从primefaces showcase实现过滤器示例：

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

给我这个结果：datatable过滤器示例很好

但是，在页面中添加bootsfaces组件，例如（唯一的更改是添加一个空

<?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数据表筛选器样式错误

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

有没有一种方法，我可以结合引导面和primeface日期和维护primeface下拉菜单格式？

共有2个答案

终彬郁

2023-03-14

它还不完美，但添加这几行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组件的外观。

童子明

2023-03-14

谢谢Stephan-顺便说一句，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>

类似资料：

AngularJS复选框过滤器

问题内容：我想过滤结果。有一个葡萄酒清单，我的愿望是当未选中任何复选框时，将显示整个葡萄酒清单。当仅选中1个复选框时，显示相关类别当选中多个复选框时，将显示相关类别我是AngularJS的新手，我尝试了ng-model都没有成功，这是没有与函数关联的ng-model的代码：如何使用ng-model或ng-change将功能与每个复选框按钮相关联以具有实时过滤模型？问题答案：只是添加
primefaces-数据表过滤器

我正在尝试在datatable（primefaces 3.5）中进行筛选。仅当用户单击commandLink时才应触发筛选器。我的桌子：我有3个问题与此代码： 1-过滤器不工作。如果我点击命令链接，页面会重新加载，但没有任何内容被过滤。可能是因为#form\： filteredTable\：statusColumn_filter'）. val（）返回未定义。所以我想我没有设置过滤器的值（对吗？
Primefaces数据表选择对象

我对Primefaces数据表有一个问题，尤其是对Selection对象。在我下面的代码中，我总是为变量“选定的问题”获得空，该变量绑定到具有选择的数据表。联合战略框架如下：和相关的Bean类（AllCountionBean.class）：数据模型：我调试了一些运行，并提到AllQuestionBean中的变量“selectedQuestion”。课程永远不会固定。也就是说，“onRow
Primefaces：ajax导航和dataTable复选框选择

我在应用程序中遇到复选框选择问题。我在一个页面上有一个dataTable（index.xhtml）。在同一个页面上有一个ajax按钮，当用户单击它时，应用程序应该导航到另一个页面（detail.xhtml）。详细信息页面包含用于导航回索引的返回按钮。xhtml。导航有效，但当用户从详细信息页面返回时，当用户单击dataTable时，dataTable中的行复选框不会被选中（选中所有行的标题复选框有
选择菜单选项边框无

问题内容：我正在尝试更改select option边界，但是无法做到这一点，我已经尝试了很多次，但是找不到合适的解决方案。我已经附上了屏幕截图。问题答案：选择的下拉列表是所谓的ShadowDOM的一部分。在当前的CSS规范第3级中，无法定位大多数ShadowDOM元素。您可以在此处阅读有关ShadowDOM的规范，尽管关于所需内容的内容并不多。 Chrome有一些专有的选择器可以更改某些 s
PrimeFaces TreeTable-停止复选框选择传播

环境： PrimeFaces 6.1 JSF 2.2 Tomcat 7.0.23 Java1.7。0_79 实现了一个带有复选框选择的TreeTable，并且需要分别防止父节点和子节点的选择向上和向下传播以进行客户端和服务器端处理。示例树：父节点 --子节点1 --子子节点1.1 --子节点2 ----子子节点2.1 所需行为：选择节点时，只应选中该节点的复选框。实际行为（开箱即用）：选择

primefaces数据表过滤器选择复选框菜单和引导面

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档