Question

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

现在我想改变输入文本颜色，例如..

1.如果SelectOneMenu值被选为“单一”输入文本框颜色将仅为该特定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

您可以在数据表上使用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>

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

带有getter和setter的Employee类中的Delclare颜色变量。

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

在数据表中的selectOneMenu（下拉列表）更改时，在行级别更改inputtext的颜色

3 个答案: