在SelectOne菜单（下拉菜单）的行级别更改inputtext的颜色在Datatable中更改

Question

我在我的应用程序中使用primeface（v.3.0）。有两列，一列是输入文本，另一列是选择菜单（下拉）。

现在我想用一些例子来改变输入文本的颜色，比如。。

1.如果选择一个菜单值被选为“单一”输入文本框，则该特定pID的颜色将仅为“绿色”。

2.如果选择一个菜单值被选为“已婚”，输入文本框颜色将仅为该特定pID的“红色”。

3.如果选择一个菜单值被选为“离异”输入文本框颜色将仅为该特定pID的“黄色”。

所以我尝试用这种方式......

   <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时更改输入文本值，但正如您所见，我在列级别应用了InputExtBox颜色更改逻辑，因此所有列的InputExt颜色都会更改。

因此，我如何在行级别应用更改输入文本框颜色的逻辑（即仅用于特定ID）

Answer 1

可以在datatable上使用primefaces的rowStyleClass属性。在rowStyleClass属性中，可以使用三元运算符（在您的例子中，类似于

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

三元运算符的结果应该与已经加载到该页面上的css样式类相对应

Answer 2

这里的代码对我来说是完美的。

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

在backingbean中，以这种方式迭代datatabale arraylist，并为inputtext设置颜色。

雇员类中的Delclare颜色变化及其getter和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");
                        }
}

Answer 3

可以对符合条件的行使用不同的样式类。

在页面中使用此选项，将根据状态启用样式类：

<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中，您需要以下内容：

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

这样，表行第一列中的输入元素将获得背景色，绿色、红色或黄色。

注意：#{s.status}的结果必须是“单身”、“已婚”或“离婚”。