wabacus中通过format将百分比数据显示成进度条样式
如题,通过format将百分比形式的数据改成进度条样式,实际就是把原数据替换成拼凑的html代码
其中的progress_rate列要求是百分比形式,并且其所在的col要求配置align="left".
css中还提供了其他颜色,可以根据需要更换
(注:sql语句是sql server的语法,union拼凑的)
效果如图 
page配置文件如下
<!-- 百分比用css进度条显示2012-8-9 --><page xmlns="http://www.wabacus.com" id="progress_bar" css="/css/test.css"><report id="report1" title="百分比进度条显示" pagesize="10"><display><col column="{sequence:0}" label="序号"></col><col column="name" label="名称"></col><col column="progress_rate" label="进度" align="left"></col></display><sql><value><![CDATA[select 'a' as name ,'20%' as progress_rate unionselect 'b' as name ,'40%' as progress_rate unionselect 'c' as name ,'50%' as progress_rate unionselect 'd' as name ,'80%' as progress_rate unionselect 'e' as name ,'100%' as progress_rate order by name]]></value></sql><format><value><![CDATA[progress_rate=progress_rate==null?"0":progress_rate.trim();if(Double.parseDouble(progress_rate.substring(0, progress_rate.indexOf('%')))>50)//如果大于50% 显示skin-greenprogress_rate="<div class="process-bar skin-green"><div class="pb-wrapper"><div class="pb-highlight"></div><div class="pb-container"><div class="pb-text">"+progress_rate+"</div><div class="pb-value" style="width:"+progress_rate+"" ></div></div></div></div>";//小于50%显示skin-orangeelse progress_rate="<div class="process-bar skin-orange"><div class="pb-wrapper"><div class="pb-highlight"></div><div class="pb-container"><div class="pb-text">"+progress_rate+"</div><div class="pb-value" style="width:"+progress_rate+"" ></div></div></div></div>";//System.out.println(progress_rate);]]> </value></format></report></page>@CHARSET "UTF-8";/* progress_bar begin */.process-bar { width: 100%; display: inline-block; *zoom: 1;}.pb-wrapper { border: 0px solid gray; border-style: solid none; position: relative; background: #cfd0d2;}.pb-container { border: 0px solid gray; border-style: none solid; height: 18px; position: relative; left: 0px; margin-right: 0px; padding: 1px;}.pb-highlight { position: absolute; left: 0; top: 0; _top: 1px; width: 100%; opacity: 0.6; filter: alpha(opacity = 60); height: 6px; background: white; line-height: 0; z-index: 1}.pb-text { width: 100%; position: absolute; left: 0; top: 2; text-align: center;}.pb-value { height: 100%; background: #19d73d;}.pb-text { color: black;}.skin-green .pb-wrapper { border-color: #666; border-top-color: #628c2d;}.skin-green .pb-container { border-color: #666; border-left-color: #628c2d;}.skin-green .pb-text { color: black}.skin-blue .pb-wrapper { border-color: #0e7c78; border-top-color: #41beb9;}.skin-blue .pb-container { border-color: #0e7c78; border-left-color: #41beb9;}.skin-blue .pb-text { color: white}.skin-blue .pb-value { background: #159b96;}.skin-red .pb-wrapper { border-color: #8e1411; border-top-color: #cb3d3a;}.skin-red .pb-container { border-color: #8e1411; border-left-color: #cb3d3a;}.skin-red .pb-text { color: #470200;}.skin-red .pb-value { background: #d70500}.skin-orange .pb-wrapper,.skin-orange .pb-container { border-color: #d55110;}.skin-orange .pb-text { color: #250f00;}.skin-orange .pb-value { background: #d75a00;}.skin-purple .pb-wrapper,.skin-purple .pb-container { border-color: #a90561;}.skin-purple .pb-text { color: #720040;}.skin-purple .pb-value { background: #9d118e}.skin-black .pb-wrapper,.skin-black .pb-container { border-color: black}.skin-black .pb-text { color: gray;}.skin-black .pb-value { background: #111111;}/* progress_bar end */