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 */