使用Javascript在primefaces数据表中设置默认过滤器

Using Javascript to set default filter in primefaces datatable

本文关键字：设置 默认 过滤器 数据表 Javascript primefaces 使用      更新时间：2023-09-26

我有一个Primefaces数据表，其中一列有Filter下拉菜单。我想在页面加载时为过滤器设置一个默认值。通过使用filterValue并为backingbean中的选项设置默认值，可以在页面加载时的菜单中选择该值，但实际上并没有过滤数据表本身。

我已经尝试使用下面的例子添加javascript来强制页面加载默认过滤器，但它不起作用。

在素数面数据表Filter 中设置默认值

我没有太多地使用javascript，所以我的问题可能存在。

JSF页面：

<h:body>
    <h:form>
        <ui:define name="header" >
            <h:outputScript name="common.js" target="body" />
        </ui:define>
    </h:form>

<p:dataTable var="dataItem" value="#{homepageBean.accounts}" 
         filteredValue="#{homepageBean.filterAccounts}" widgetVar="dataTableWidgetVar" >
        <p:column headerText="Status" id="statusCol" filterBy="status" 
                filterOptions="#{homepageBean.menu.statusOption}" 
                filterValue="#{homepageBean.defaultStatus}" >                                   
            <h:outputText value="#{dataItem.status}" />
        </p:column>             
</p:dataTable>      
</h:body

common.js页面：

function setDefaultFilter() {
    dataTableWidgetVar.filter();   
}

homepageBean有适用的getter和setter。我使用的是Primefaces 4.0。

<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 id="carId" 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">
                <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">
                <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>
    <script>
        jQuery(document).ready(function() {
            jQuery('input[id*="globalFilter"]').val('Orange');
            PF('carsTable').filter()
          });
    </script>

这是我的一组代码，在Primefaces5.0中演示了默认的过滤器数据表。原始代码出现在primefaces演示数据表过滤器中。开发的代码和原始代码之间的区别仅在于jquery部分。如果使用Primefaces 4.0或更新版本（5.0），则必须使用PF('dataTableWidgetVar').filter()而不是dataTableWidgetVar.filter()

<script>
        jQuery(document).ready(function() {
            jQuery('input[id*="globalFilter"]').val('Orange');
            PF('carsTable').filter()
          });
    </script>
相关文章：