简体   繁体   English

Primefaces数据表过滤器

[英]Primefaces datatable filter

I've tried a few things but I could not do any work on my filter dataTable. 我尝试过一些东西但是我无法对我的过滤器dataTable做任何工作。 Already follow the example of the primefaces showcase and nothing. 已经按照primefaces展示的例子,没有。

I have the following codes: 我有以下代码:

xhtml: XHTML:

<p:dataTable id="dataTable" var="valor" value="#{beanMensagemXContato.listaContatoEmail}" 
                widgetVar="carsTable" emptyMessage="No cars found with given criteria" filteredValue="#{tableBean.filteredCars}">                           

                <f:facet name="header">  

                    </f:facet> 

                    <p:column 
                        style="max-width: 50px; min-width: 50px; overflow: hidden">
                        <f:facet name="header">
                            <h:outputText value="Contato" />
                        </f:facet>
                        <h:outputText value="#{valor.nomGrupoEmail}" />
                    </p:column>

                    <p:column
                        style="max-width: 50px; min-width: 50px; overflow: hidden">
                        <f:facet name="header">
                            <h:outputText value="Email" />
                        </f:facet>
                        <h:outputText value="#{valor.endEmail}" />
                    </p:column>

                    <p:column
                        style="max-width: 50px; min-width: 50px; overflow: hidden">
                        <f:facet name="header">
                            <h:outputText value="Telefone" />
                        </f:facet>
                        <h:outputText value="#{valor.numTelefone}" />
                    </p:column>

                    <p:column
                        style="max-width: 50px; min-width: 50px; overflow: hidden">
                        <f:facet name="header">
                            <h:outputText value="Ações" />
                        </f:facet>

                    </p:column>


                </p:dataTable>

Bean: 豆角,扁豆:

public List<ContatoEmail> getListaContatoEmail() {

        listaContatoEmail = new ArrayList<ContatoEmail>();
        listaContatoEmail = consultaContatoEmail.listarContatoEmail();

        return listaContatoEmail;
    }

I want something that when you type a word in dataTable select the row. 我想要一些东西,当你在dataTable中输入一个单词时选择该行。

Can someone pass me a simple example. 有人可以给我一个简单的例子。

Since I already appreciate. 既然我已经欣赏了。

Debora 黛博拉

Ok, here is an example: I'll take the popular example of cars. 好的,这是一个例子:我将采用流行的汽车示例。

Use Case: Dynamically update a data-table upon each keystrokes in auto-complete 使用案例:在自动完成的每次击键时动态更新数据表

My Facelet: 我的面孔:

<!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://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<f:view>
    <h:head />
    <h:body>
        <h:form>
            <p:autoComplete var="carac" converter="carconvertor"
                value="#{testBean.selectedCar}" itemLabel="#{carac.carmodel}"
                itemValue="#{carac}"
                completeMethod="#{testBean.complete}" process="@this"
                onSelectUpdate="idGrid">
                <p:ajax event="keyup" listener="#{testBean.onValueChange}"
                    update="idGrid"></p:ajax>
            </p:autoComplete>

            <p:dataTable value="#{testBean.matchingCarModels}" var="carmatch"
                id="idGrid" converter="carconvertor">
                <p:column headerText="Car Model">
                    <h:outputText value="#{carmatch.carmodel}" />
                </p:column>
            </p:dataTable>
        </h:form>
    </h:body>
</f:view>
</html>

A Car POJO 汽车POJO

public class Car 
{
    private String carmodel;

    public Car(String carmodel) {
        super();
        this.carmodel = carmodel;
    }
    // Add setters and getters
}

A Car Faces Convertor 汽车面转换器

@FacesConverter(forClass=Car.class, value="carconvertor")
public class CarConverter 
implements Converter {
    @Override
    public Object getAsObject(FacesContext arg0, UIComponent component, String stringvalue) {
        Car car = new Car(stringvalue);
        return car;
    }

    @Override
    public String getAsString(FacesContext arg0, UIComponent component, Object objectvalue) {
        Car car = (Car) objectvalue;

        if(car == null) {
            return StringUtils.EMPTY;
        }

        return car.getCarmodel();
    }
}

And finally the backing bean 最后是支持豆

@ManagedBean(name="testBean")
@SessionScoped
public class TestBackingBean 
{
    /**
     * The input filter
     */
    private String filter = StringUtils.EMPTY;

    /**
     * Some test data
     */
    private final List<Car> carModels = new ArrayList<Car>() {
        {
            add(new Car("toyota"));
            add(new Car("honda"));
            add(new Car("suzuki"));
            add(new Car("ford"));
            add(new Car("renault"));
            add(new Car("subaru"));
        }
    };

    /**
     * For updating the grid.
     */
    public void onValueChange(AjaxBehaviorEvent event)
    {
        AutoComplete ac = (AutoComplete) event.getSource();

        Car input = (Car) ac.getValue();

        filter = (input == null) ? StringUtils.EMPTY : input.getCarmodel();
    }

    /**
     * For the auto complete drop down
     */
    public List<Car> complete(String input)
    {
        filter = input;

        return getMatchingCarModels();
    }

    /**
     * get the match
     */
    public List<Car> getMatchingCarModels()
    {
        if(StringUtils.isEmpty(filter))
            return carModels;

        List<Car> matches = new ArrayList<Car>();

        for(Car car : carModels)
        {
            if(car.getCarmodel().startsWith(filter))
            {
                matches.add(car);
            }
        }

        return matches;
    }

    /**
     * The selected car
     */
    private Car selectedCar;
    //Add setters and getters for above member
}

HTH HTH

You could see the solution to the same problem in stackoverflow here 你可以在这里看到stackoverflow中同一问题的解决方案

As an alternative approach (using auto complete) for the search and capture the keyup event to update the data table. 作为替代方法(使用自动完成)进行搜索并捕获keyup事件以更新数据表。 An example tallying to your context: 一个与您的上下文相关的示例:

<p:autoComplete var="address"
    value="#{addressBean.address}" itemLabel="#{address.personName}"
    itemValue="#{address}" completeMethod="#{addressBean.complete}"
    process="@this" converter="personconvertor"
    onSelectUpdate="dataTable">
    <p:ajax event="keyup" listener="#{addressBean.onValueChange}"
        update="dataTable"></p:ajax>
</p:autoComplete>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM