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 函数说的内容，该项目需要被绘制。

IfcomunMB.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:selectOneMenu生成一个 html 列表。如果您从浏览器开发人员设置中调查它，它看起来像：

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