JSF的h:outputText 实现根据条件判断是否标红值显示

本文介绍如何在JSF中使用条件渲染和样式属性来改变元素的显示方式。通过示例展示,当后台传入特定值时,如“待更新”,如何使文本变为红色显示,而其他情况则保持默认样式。这种方法避免了额外的JavaScript代码,提供了更简洁的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

原来代码:

<h:outputText value="#{snOrderInvoice.cust_name}" />

处理方法:

当需要根据自己定义的值去判断的时候,需要添加上:style="color:red"  即可。同时,需要添加rendered去判断条件。

 

上代码:

<h:outputText style="color:red" value="#{OrderInvoice.cust_name}" rendered="#{OrderInvoice.cust_name=='待更新'}"/>

<h:outputText value="#{OrderInvoice.cust_name}" rendered="#{OrderInvoice.cust_name!='待更新'}"/> 

说明:当后台传入的值为OrderInvoice.cust_name 是“待更新”的时候,则显示标红显示,如果传入值不等于 “待更新”的时候,则不标红显示。十分的方便快捷,无需再写JS了。

 

<?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:cc="http://java.sun.com/jsf/composite" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"> <cc:interface/> <cc:implementation> <p:dialog header="周达成率记录" id="weekSummaryLogDia" widgetVar="weekSummaryLogDia" position="center" modal="true"> <p:dataTable id="summaryLog" widgetVar="summaryLog" value="#{wtWeekSummaryBean.showWeekSummaryLogs}" var="entity" currentPageReportTemplate="{startRecord}-{endRecord} of {totalRecords} records" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" emptyMessage="没有数据" rows="10" resizableColumns="true" style="width:450px;" rowHover="true" rowIndexVar="rowvar"> <p:column headerText="序号" style="width:15px;text-align: center;"> <h:outputText value="#{rowvar+1}"/> </p:column> <p:column headerText="周id" style="width:60px;text-align:center;"> <h:outputText value="#{entity.weekId}"/> </p:column> <p:column headerText="工号" sortBy="#{empNo}" style="width:60px;text-align:center;"> <h:outputText value="#{entity.empNo}"/> </p:column> <p:column headerText="姓名" width="50" style="text-align:center;"> <h:outputText value="#{entity.empName}"/> </p:column> <p:column headerText="网页工时" style="width:60px;text-align:right"> <h:outputText value="#{entity.webWt}"> <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/> </h:outputText> </p:column> <p:column headerText="OPT工时" style="width:60px;text-align:right"> <h:outputText value="#{entity.optWt}"> <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/> </h:outputText> </p:column> <p:column headerText="品质扣分" style="width:60px;text-align:right"> <h:outputText value="#{entity.deductWt}"> <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/> </h:outputText> </p:column> <p:column headerText="合计产出" style="width:60px;text-align:right"> <h:outputLabel value="#{entity.totalWt}"> <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/> </h:outputLabel> </p:column> <p:column headerText="实际出勤" style="width:60px;text-align:right"> <h:outputText value="#{entity.onDutyHour}"/> </p:column> <p:column headerText="出勤率" style="width:50px;text-align:right"> <h:outputText value="#{entity.onDutyRate}"> <f:convertNumber type="percent" maxFractionDigits="1"/> </h:outputText> </p:column> <p:column headerText="达率" style="width:50px;text-align:right"> <h:outputText value="#{entity.uptoStandardRate}"> <f:convertNumber type="percent" maxFractionDigits="2" /> </h:outputText> </p:column> <p:column headerText="创建时间" style="display:none;"> <h:outputText value="#{entity.createTime}"> <f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" timeZone="GMT+8"/> </h:outputText> </p:column> <p:column headerText="更新时间" style="display:none;"> <h:outputText value="#{entity.updateTime}"> <f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" timeZone="GMT+8"/> </h:outputText> </p:column> </p:dataTable> </p:dialog> </cc:implementation> </html> 我JSF 碎片页面是这样的,可能别的项目调用后这边弹窗显示数据
最新发布
08-08
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值