0

アプリケーションでprimefaces（v.3.0）データテーブルを使用しています。Datatableには2つの列があり、1つの列はinputtextで、もう1つの列は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のみ）

4

3 に答える 3

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}、「シングル」、「既婚」、または「離婚」である必要があります。

于 2012-07-31T15:10:39.843 に答える
0

データテーブルでprimefacesのrowStyleClass属性を使用できます。rowStyleClass属性では、三項演算子を使用できます（あなたの場合のように、

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

三項演算子の結果は、そのページに既にロードしたcssスタイルクラスに対応している必要があります

于 2012-07-21T06:51:07.303 に答える
0

ここに私のために完全に働いたコードがあります。

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

バッキングBeanでは、この方法でdatatabale arraylistを繰り返し、inputtextの色を設定します。

ゲッターとセッターを使用して、Employeeクラスのカラーバリバールを削除します。

    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");
                        }
}
于 2012-08-06T06:10:59.033 に答える