Question

如何将颜色设置为p：selectOneMenu row，我有一个带有客户列表的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>

Answer 1

如果您想要绘制所有行：

.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: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，因此我们找到已“取消”文本并更改其背景颜色的元素，就是这样。

如何设置颜色以选择一行菜单

1 个答案: