更改selectOneMenu上的行级别的输入文本的颜色（下拉列表）更改数据表

Question

我在我的应用程序中使用primefaces（v.3.0）数据表。 在Datatable中有两列，一列是inputtext，另一列是SelectOneMenu（下拉列表）。

现在我要像..

1.如果selectOneMenu用于价值得到评选为“单身”输入文本框的颜色将是“绿色”仅用于这个特定PID与某些情况下，改变的inputText颜色。

2.如果SelectOneMenu值被选为“已婚”输入文本框颜色将仅针对该特定pID为“红色”。

3.如果SelectOneMenu值被选为“离婚”输入文本框颜色将仅针对该特定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; 
} 

我能够改变selectOneMenu用于为特定的PID变化的输入文本值，但你可以看到 我已经申请inputtextbox在列级更改颜色，所以所有列的inputtext颜色都会更改。

所以，我怎么能申请改变inputText的框颜色为行级（即仅用于特定ID）

Answer 1

你，可以使用不同的风格类匹配条件的行

使用这个在你的页面的样式类将被启用取决于状态：

<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}的结果必须是“单身”，“已婚”或“离婚”。

Answer 2

您可以使用primefaces' rowStyleClass在数据表属性的逻辑。 在rowStyleClass attrribute你可以在你的情况下，使用三元运算符（如，像

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

三元运算符的结果应该对应于你已经加载的页面的CSS样式类

Answer 3

这里的代码完美地为我工作。

<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以这种方式迭代datatabale arraylist并为inputtext设置颜色。

Delclare颜色在Employee类中的varibale与它的getter和setter。

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