gpt4 book ai didi

jsf - selectOneMenu(Primefaces)中选项的不同颜色

转载 作者:行者123 更新时间:2023-12-04 03:52:09 24 4
gpt4 key购买 nike

我需要在Primefaces中显示不同颜色的选项。

我有一个带有动态项的selectOneMenu(列表)

<p:selectOneMenu id="carMenu" style="margin-top:4px;"
value="#{Bean.selectedCar}" effect="fade"
autoupdate="true">
<f:selectItems id="carsId"
value="#{myBean.allCars}" var="carItems"
itemLabel="#{carItems.name}" itemValue="#{carItems}" />
</p:selectOneMenu>

 private List<Cars> allCars;

如果汽车已售出,则需要显示红色选项的背景,否则显示黑色。在我的模型中,我得到了一个属性,该属性为我提供了是否售出汽车的值( bool 值出售)。

如何在selectOneMenu中设置颜色?

最佳答案

解决方案是使用“高级”方式在PrimeFaces 4.0和更高版本中显示此内容。

您可以将f:selectItems标记与p:columnp:selectOneMenu标记结合使用(请参阅the showcase),并为列本身使用迭代var,就像在表中一样。

理想的情况是根据条件将styleClass设置为整个列,但是不幸的是,它不起作用。幸运的是,添加一些可以实现目标的Javascript/jQuery代码,请查看此SSCCE:

XHTML页面

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui" style="height: 400px;">
<h:head>
<style type="text/css">
red-background {
//Empty, used just as a reference to set the style with jQuery
}
</style>
</h:head>
<h:body>
<h:form>
<p:commandButton action="#{bean.send}" value="Send" ajax="false" />
<p:selectOneMenu id="carMenu" style="margin-top:4px;"
value="#{bean.selectedCar}" effect="fade" autoupdate="true" var="car"
converter="omnifaces.SelectItemsConverter" onchange="setSelectionColor();">
<f:selectItems id="carsId" value="#{bean.allCars}" var="carItem"
itemLabel="#{carItem.name}" itemValue="#{carItem}" />
<p:column>
<h:outputText value="#{car.name}"
styleClass="#{car.sold ? 'red-background' : ''}" />
</p:column>
</p:selectOneMenu>
</h:form>
<script>
$(document).ready(function() {
//Set red background for the options (not for td, but for its parent tr)
$(".red-background").parent().css( "background-color", "red" );
setSelectionColor();
});
function setSelectionColor(){
//Check if the selected value has a red background
//(active and red-background styles altogether),
//if true, set the selectonemenu label to red too
if($(".ui-state-active .red-background").size() > 0){
$(".ui-selectonemenu-label").css( "background-color", "red" );
}else{
$(".ui-selectonemenu-label").css( "background-color", "white" );
}
}
</script>
</h:body>
</html>

Bean.java
@ManagedBean
@ViewScoped
public class Bean implements Serializable {

public class Car implements Serializable {
String name;
boolean sold;

public Car(String name, boolean sold) {
this.name = name;
this.sold = sold;
}

public String getName() {
return name;
}

public boolean isSold() {
return sold;
}
}

private List<Car> allCars = Arrays.asList(new Car("Audi", true), new Car(
"Mercedes", false));

public List<Car> getAllCars() {
return allCars;
}

private Car selectedCar;

public Car getSelectedCar() {
return selectedCar;
}

public void setSelectedCar(Car selectedCar) {
this.selectedCar = selectedCar;
}

public void send() {
System.out.println("Sent " + selectedCar.name);
}

}

您可能还对只设置字体颜色而不是背景感兴趣:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<style type="text/css">
.red-font {
color: red;
}
</style>
</h:head>
<h:body>
<h:form>
<p:commandButton action="#{bean.send}" value="Send" ajax="false" />
<p:selectOneMenu id="carMenu" style="margin-top:4px;"
value="#{bean.selectedCar}" effect="fade" autoupdate="true"
var="car"
converter="omnifaces.SelectItemsConverter">
<f:selectItems id="carsId" value="#{bean.allCars}" var="carItems"
itemLabel="#{carItems.name}" itemValue="#{carItems}" />
<p:column>
<h:outputText styleClass="#{car.sold ? 'red-font' : ''}"
value="#{car.name}" />
</p:column>
</p:selectOneMenu>
</h:form>
</h:body>
</html>

关于jsf - selectOneMenu(Primefaces)中选项的不同颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19403631/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com