在 Datatable 中的 selectOneMenu(Dropdown) 更改行级别更改 inputtext 的颜色

Question

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

现在我想在某些情况下更改输入文本颜色，例如..

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

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

我可以更改特定 pID 的 selectonemenu 更改时的输入文本值，但您可以 请参阅我在列级别应用了 inputtextbox 颜色更改逻辑，因此所有列 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

这里的代码非常适合我。

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

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

在 Employee 类中使用它的 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");
                        }
}

Answer 3

您可以在数据表上使用 primefaces 的 rowStyleClass 属性。 在 rowStyleClass 属性中，您可以使用三元运算符（如您的情况，类似

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

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