change color of inputtext at row level on selectOneMenu(Dropdown) change in Datatable

问题

I am using primefaces(v.3.0) datatable in my application. In Datatable there are two columns , one column is inputtext and other is SelectOneMenu(dropdown).

Now I want to change inputtext color with some cases like..

1.if SelectOneMenu value get selected as "Single" input textbox color will be "green" for that particular pID only.

2.if SelectOneMenu value get selected as "Married" input textbox color will be "red" for that particular pID only.

3.if SelectOneMenu value get selected as "Divorced" input textbox color will be "yellow" for that particular pID only.

So I am trying in this way....

   <h:form id="form">
<h:panelGrid columns="2" cellpadding="10" id="h">
        <p:dataTable id="table" var="s"
                                value="#{backingBean.arrayList}"
                                widgetVar="empTable" rowKey="#{pt.pID}"
                                paginator="true" rows="15"
style="width: 100%;margin-bottom: 10px;" rowStyleClass="#{s.status}">

                                <f:facet name="header">  
           List of Patients Appointments  
        </f:facet>

                                <p:column headerText="Status" id="t">

                        <p:inputText value="#{s.status}" />

                    </p:column>


                        <p:column headerText="EmployeeAction">
                        <p:selectOneMenu id="scAction" value="#{backingBean.obj.empStatus}"
                                style="width:125px">
                                        <f:selectItem itemLabel="Select" itemValue="" />
                                        <f:selectItems value="#{schedulerBB.scheduleActionSelect}"
                                            itemLabel="#{backingBean.obj.empStatus}"
                                            itemValue="#{backingBean.obj.empStatusID}" />
                                    <p:ajax event="change" listener="#{backingBean.changeColor(s)}"  update=":form" />


                                    </p:selectOneMenu>

                                </p:column>

                        </p:dataTable>
                        </h:panelGrid>
                        </h:form>

In CSS

.Single td:nth-child(1) input {
    background-color: green;
}

.Married td:nth-child(1) input {
    background-color: red;
}

.Divorced td:nth-child(1) input {
    background-color: yellow;
}

In BackingBean:

private Employee obj;

    //Getter setter methods

    public Employee getObj() {
    if(obj==null){
    obj=new Employee();
    }
    return obj;
}

public void setObj(Employee obj) {
    this.obj = obj;
}


public void changeColor(Employee e){

  if(obj.getEmpStatus().equals("1")){  

        EmployeeDAO.updateEmpTable(e.getPID,e.getStatus);

    }

    css
    .Single td:nth-child(1) input {
    background-color: green;
}

.Married td:nth-child(1) input {
    background-color: red;
}

.Divorced td:nth-child(1) input {
    background-color: yellow;
}

I am able to change the input text value on change of selectonemenu for that particular pID,but as you can see I have applied inputtextbox color change logic at column level ,so all columns inputtext color changes.

So how can I apply logic of changing inputtext box color at row level(i.e for particular ID only)

回答1:

You can use a different style class for rows that match a condition.

Using this in your page a style class will be enabled depended on the status:

<p:dataTable id="table" var="s" value="#{backingBean.arryList}" widgetVar="EmployeeTable" rowKey="#{s.pID}" paginator="true" rows="15" style="width: 100%;margin-bottom: 10px;" rowStyleClass=#{s.status}>
    <p:column id="st">
        <f:facet name="header">  
            <h:outputText value="Status" />  
        </f:facet>  
        <p:inputText value="#{s.status}" style="width:90px;"/>
    </p:column>

    <p:column headerText="Employee Status">
        <p:selectOneMenu value="#{backingBean.obj.empStatus}" style="width:125px">
            <f:selectItem itemLabel="Select" itemValue="" />
            <f:selectItems value="#{BackingBean.empStatusActionSelect}"
                itemLabel="#{backingBean.obj.empStatus}"
                itemValue="#{backingBean.obj.empStatusID}" />
                <p:ajax event="change" listener="#{backingBean.changeColor}" update="table"/>
        </p:selectOneMenu>
</p:dataTable>

In your CSS you need the following:

.Single td:nth-child(1) input {
    background-color: green;
}

.Married td:nth-child(1) input {
    background-color: red;
}

.Divorced td:nth-child(1) input {
    background-color: yellow;
}

This way an input element in the first column of a table row gets a background color, green, red or yellow.

Note: the outcome of #{s.status} must be "Single", "Married", or "Divorced".

回答2:

Here the code which worked for me perfectly.

   <p:dataTable id="table" var="s" value="#{backingBean.myArraylist}" widgetVar="EmployeeTable" rowKey="#{s.pID}" paginator="true" rows="15" style="width: 100%;margin-bottom: 10px;" >
        <p:column id="st">
            <f:facet name="header">  
                <h:outputText value="Status" />  
            </f:facet>  
            <p:inputText value="#{s.status}" style="width:90px;" style="#{s.color}"/>
        </p:column>

        <p:column headerText="Employee Status">
            <p:selectOneMenu value="#{backingBean.obj.empStatus}" style="width:125px">
                <f:selectItem itemLabel="Select" itemValue="" />
                <f:selectItems value="#{BackingBean.empStatusActionSelect}"
                    itemLabel="#{backingBean.obj.empStatus}"
                    itemValue="#{backingBean.obj.empStatusID}" />
                    <p:ajax event="change" listener="#{backingBean.changeColor}" update="table"/>
            </p:selectOneMenu>
    </p:dataTable>

In Backing bean iterate datatabale arraylist in this way and set color for inputtext.

Delclare color varibale in Employee class with its getter and setters.

    myArraylist = myDAO.getEmployeeList();
    for (Employee s : myArraylist) {
                        if(s.getStatus().equals("Single")){
                            s.setColor("background-color : green");
                        }   
                    else if(s.getStatus().equals("Married")){
                            s.setColor("background-color : red");
                        }   
                    else if(s.getStatus().equals("Divorced")){
                            s.setColor("background-color : yellow");
                        }
}

回答3:

You can use primefaces' rowStyleClass attribute on the datatable. In the rowStyleClass attrribute you can use a ternary operator (as in your case, something like

#{backingBean.obj.empStatus eq single? green: blue}

The result of the ternary operator should correspond to css style classes you already have loaded on that page

来源：https://stackoverflow.com/questions/11578926/change-color-of-inputtext-at-row-level-on-selectonemenudropdown-change-in-data