如题,通过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 union
select 'b' as name ,'40%' as progress_rate union
select 'c' as name ,'50%' as progress_rate union
select 'd' as name ,'80%' as progress_rate union
select '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-green
progress_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-orange
else 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>
其中的css内容为
@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 */
- 大小: 6.9 KB
分享到:
相关推荐
VBA实现进度条的显示 Sub Test() ' The UserForm1_Activate sub calls Main UserForm1.LabelProgress.Width = 0 UserForm1.Show End Sub Private Sub UserForm_activate() Call Main End Sub Sub Main() ' ...
VC 下载文件显示进度条,pwnd->GetDlgItemText(IDC_EDIT1,szFile); pwnd->SetDlgItemText(IDC_STAT,"正在校验下载地址..."); fTargFile = netSession.OpenURL(szFile,1,INTERNET_FLAG_TRANSFER_BINARY | ...
WPF中StringFormat的用法可以参照C#中string.Format的用法
RichTextBox控件中显示HTML格式数据
DELPHI 中的 Format 函数DELPHI 中的 Format 函数DELPHI 中的 Format 函数DELPHI 中的 Format 函数
argues),可以将各类数据格式化为字符串并输出。其中format参数指定了输出的格式,是最复杂也是最难掌握的一点,而argues则是一系列等 待被格式化的对象。该函数对c语言中printf函数的用法进行了一定的模仿,因此有...
前段时间上传了一个fluent大批量数据处理的代码,经过同学运行发现,当fluent导出数据量到excel时,因为超过百兆太大不支持,于是稍微改写了一下,这样可以选择 以dat格式或则txt格式储存,然后在运用该段代码处理...
数据销毁命令介绍
VSCode C/C++ Clang自定义样式文件.clang-format。 基于Google样式,根据自己的习惯修改。 见博文:https://blog.csdn.net/hxiaohai/article/details/100705224
pb9加载透明图片或水印,数据窗口截屏,图片打印,pb9不能直接将透明的png图片或水印直接打印,可以转换成gif进行打印,但是gif直接打印背景会变成黑色,此程序可以将预览的数据窗口直接截屏,保存到本地
VC中format用法 以CString的Format举例
delphi中的Format函数详解~~~
python实现文本进度条 程序进度条 加载进度条 单行刷新功能,具体内容如下所示: 利用time库来替代某个程序 的进行过程,做实例, 思路是,简单打印出来程序进度 单行刷新关键是\r, python默认是print后换行,所以...
赠送jar包:jackson-dataformat-yaml-2.11.4.jar; 赠送原API文档:jackson-dataformat-yaml-2.11.4-javadoc.jar; 赠送源代码:jackson-dataformat-yaml-2.11.4-sources.jar; 赠送Maven依赖信息文件:jackson-data...
赠送jar包:jackson-dataformat-cbor-2.9.6.jar; 赠送原API文档:jackson-dataformat-cbor-2.9.6-javadoc.jar; 赠送源代码:jackson-dataformat-cbor-2.9.6-sources.jar; 赠送Maven依赖信息文件:jackson-data...
今天小编来手写一个自定义圆形进度条:先看效果: ...-- 圆形进度条进度显示的颜色 --> <attr name=roundProgressColor format=color> <!-- 外圈圆的颜色 --> <attr name=roundColor format=color></attr>
赠送jar包:parquet-format-2.3.1.jar; 赠送原API文档:parquet-format-2.3.1-javadoc.jar; 赠送源代码:parquet-format-2.3.1-sources.jar; 赠送Maven依赖信息文件:parquet-format-2.3.1.pom; 包含翻译后的API...
赠送jar包:arrow-format-0.8.0.jar; 赠送原API文档:arrow-format-0.8.0-javadoc.jar; 赠送源代码:arrow-format-0.8.0-sources.jar; 赠送Maven依赖信息文件:arrow-format-0.8.0.pom; 包含翻译后的API文档:...
赠送jar包:jackson-dataformat-smile-2.10.0.jar; 赠送原API文档:jackson-dataformat-smile-2.10.0-javadoc.jar; 赠送源代码:jackson-dataformat-smile-2.10.0-sources.jar; 赠送Maven依赖信息文件:jackson-...
2、关闭Photoshop软件,将解压得到的文件复制到该目录,如果您的系统是32位,请使用ICOFormat.8bi,如果您的系统是64位请使用ICOFormat64.8bi。 3、重新打开Photoshop软件,再选择另存为,即可看到ICO格式。