0

p:selectOneMenu 行に色を設定するにはどうすればよいですか。クライアント リストを持つ selectOneMenu があります。キャンセルされたお客様は、列の背景色が赤であることをご希望です。

     <p:selectOneMenu id="listaClientesmodi" value="#{clientesMB.selectedEmpClienteCancelarContrato}" converter="clientesConverter"  panelStyle="width:500px"  
                                 effect="fade" var="p" style="width:500px"  filter="true" filterMatchMode="contains">  

                    <f:selectItems value="#{comunMB.itemsClientes}"/>  

                    <p:column>  
                        #{p.codigo} - #{p.nombre}  
                    </p:column>  
                    <f:ajax execute="@this"  listener="#{clientesMB.cargarContratosClienteSelected}"  render=":form2:panelDetalles :form2:panelEditContrato" />
                </p:selectOneMenu>
4

1 に答える 1

2

すべての行をペイントする場合:

.ui-selectonemenu-item {
    background-color: aqua!important;
}

しかし、条件付きペイントを作成したい場合。もちろん、別のはるかに単純なソリューションがある可能性がある少し複雑なソリューションを見つけました。

私のソリューションを適用できるようにするには、 に示されているクライアントのサイズであるフィールドが必要ですp:selectOneMenu。しかし、より重要なことcanceledは、アイテムをペイントする必要があることをjs関数に伝えるようなテキストを追加する必要があることです。

キャンセルされたクライアントに連結された「キャンセルされた」文字列にcomunMB.itemsClientes表示される場合。p:selectOneMenuキャンセルされたクライアントを他のクライアントと区別する必要があるためです。そして、私の解決策は、それが私ができる最善のことであったことを残念に思う必要があります。

$(document).ready(function() {
    for (var i = 0; i &lt; '#{clientesMB.size}'; i++) {
        if($(".ui-selectonemenu-items li:nth-child("+i+")").text().indexOf("Canceled") != -1) {
            $(".ui-selectonemenu-items li:nth-child("+i+")").css({"background-color":"#ff1315"});
        }
    }
});

そう; p:selectOneMenuhtml リストを生成します。ブラウザの開発者設定から調査すると、次のようになります。

<ul class="ui-selectonemenu-items">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ul>

そのため、関数は最初に、名前が付けられた CSS クラスから要素を選択し、ui-selectonemenu-itemsその子を探します。探している子ごとに、それらがキャンセルされているかどうかを確認します。

indexOfアイテムに「キャンセル」の文字列が含まれていない場合、関数は-1を返すため、「キャンセル」テキストを含む要素を見つけて背景色を変更します。それだけです。

于 2013-04-19T19:36:02.077 に答える