selectOneMenu (Primefaces) 中不同颜色的选项 [英] Different colors of options in selectOneMenu (Primefaces)
问题描述
我需要在 Primefaces 中显示不同颜色的选项.
I need to display different colors of options in Primefaces.
我有一个带有动态项目(列表)的 selectOneMenu
I have a selectOneMenu with dynamical items (List)
<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;
如果汽车卖了，我需要显示选项红色的背景，否则显示黑色.在我的模型中，我得到了一个属性，该属性为我提供了汽车是否售出的价值(布尔值).
If the car is sold, I need to display the background of the option RED otherwise BLACK. In my Model I got an attribute which gives me the value (boolean sold) back if the car is sold or not.
如何在 selectOneMenu 中设置颜色?
How can I set the colors in my selectOneMenu?
推荐答案
解决方案是在 PrimeFaces 4.0 和更新版本中使用高级"方式来显示.
The solution is to use the 'advanced' way of displaying this in PrimeFaces 4.0 and newer.
您可以将 f:selectItems 标签与 p:column 标签结合起来用于 p:selectOneMenu(请参阅 陈列柜)，对列本身进行迭代 var，就像您一样在表中.
You can combine f:selectItems tag with p:column tags for p:selectOneMenu (see the showcase), with an iteration var for the columns themselves, like you do in tables.
那么理想的做法是根据条件将 styleClass 设置为整列，但不幸的是它不起作用.幸运的是，添加一些 Javascript/jQuery 代码可以实现您的目标，请查看此 SSCCE:
Then the ideal thing would be to set the styleClass to the entire column depending on the condition, but unfortunatelly it doesn't work. Luckily, adding some Javascript/jQuery code you can achieve your goal, check out this 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);
}
}
您可能还对仅设置字体颜色而不是背景感兴趣:
You might also be interested in setting only the font color and not the background:
<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>
这篇关于selectOneMenu (Primefaces) 中不同颜色的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
