在selectOneMenu(Dropdown)的行级别上更改输入文本的颜色，在数据表中更改

问题描述

我在我的应用程序中使用了primefaces(v.3.0)数据表.在Datatable中，有两列，一列是inputtext，另一列是SelectOneMenu(dropdown).

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.如果SelectOneMenu值被选择为单个"，则输入文本框的颜色将仅对于该特定pID为绿色".

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

2.如果SelectOneMenu值被选择为已婚"输入文本框颜色，则仅对该特定pID为红色".

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

3.如果SelectOneMenu值被选择为离婚"，则输入文本框颜色将仅对于该特定pID为黄色".

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;
}

我可以在更改该特定pID的selectonemenu时更改输入文本值，但是您可以请参阅我在列级别应用了inputtextbox颜色更改逻辑，因此所有列的inputtext颜色都更改了.

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

那么我该如何在行级应用更改输入文本框颜色的逻辑(即仅适用于特定ID)

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

推荐答案

您可以对符合条件的行使用其他样式类.

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>

在CSS中，您需要以下内容:

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.

注意:#{s.status}的结果必须是单身"，已婚"或离婚".

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

这篇关于在selectOneMenu(Dropdown)的行级别上更改输入文本的颜色，在数据表中更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！