有时候我们会需要在报表中用图片的方式显示项目的进度,例如用进度条,所以我做了一个练习
一 传统进度条
1.首先要添加一个.ashx的一般处理程序文件用于接收参数,设置进度条
代码如下:
<%@ WebHandler Language="C#" Class="GridviewHandler" %>
using System;
using System.Web;
using System.Drawing;
using System.Drawing.Drawing2D;
public class GridviewHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
//接受百分比
decimal rateOfProcess = decimal.Parse(context.Request.QueryString["rateOfProcess"]);
//Bitmap 处理用像素数据定义的图像的对象
using (Bitmap bitmap = new Bitmap(100, 16))
{
//从bitmao像素对象中绘制图像
using (Graphics graphics = Graphics.FromImage(bitmap))
{
//设置图像质量,消除锯齿
graphics.SmoothingMode = SmoothingMode.AntiAlias;
//消除背景色,用于重新定义
graphics.Clear(Color.White);
//定义矩形,并设置矩形的位置及宽高
Rectangle rect = new Rectangle(0, 0, 100, 16);
//用钢笔黑色绘制矩形
graphics.DrawRectangle(Pens.Black, rect);
//由百分比获取矩形应显示的宽度
int widtn = Convert.ToInt32(rateOfProcess);
//定义与基本矩形位置,高度相同的矩形填充基本矩形
Rectangle rectInside=new Rectangle(0,0,widtn,16);
if (widtn == 100)
{
//进度为100%时用蓝色矩形填充基本矩形
graphics.FillRectangle(Brushes.Blue, rectInside);
}
else if (widtn == 0)
{
graphics.FillRectangle(Brushes.Gray, rectInside);
}
else
{
graphics.FillRectangle(Brushes.Green, rectInside);
}
//输出httl mime 类型
//gif/text 先图片后文子
context.Response.ContentType = "gif/text";
//清空缓存
context.Response.Clear();
context.Response.BufferOutput = true;
//像素对象以gif格式保存输出的数据流
bitmap.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Gif);
}
}
//context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
}
public bool IsReusable {
get {
return false;
}
}
}
2.在绑定列表中添加img标签,代码如下:
<asp:TemplateColumn HeaderText="项目进度">
<ItemTemplate>
<img alt='<%# "按原计划已完成:"+Convert.ToDecimal(Eval("RateProcess")).ToString("F2")+"%" %>'
src="<%#"GridviewHandler.ashx?rateOfProcess="+Eval("RateProcess") %>" />
<asp:Label ID="lbl1" runat="server" Text='<%#Convert.ToDecimal(Eval("RateProcess")).ToString("F2")+"%" %>'></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
3.页面显示效果如下:
二 自定义图片的进度条
前段时间有需要要做有特色的节点式的进度条,即整个阶段分为不同节点,完成一个节点,进度条填充对应的一部分:
样式定义如下:
.kpms-progressul {list-style:none; height:18px; line-height:18px; padding:0px; margin:0px;}
.kpms-progressul li {text-align:center; width:81px; padding:0px;margin:0px; display:block;float:left;font-size:7pt!important; }
.kpms-progressliready{background:url(images/proready.gif) no-repeat; color:#000;}
.kpms-progressli{background:url(images/pronormal.gif) no-repeat; color:#999;}
绑定列表后添加进度条代码如下:
前台:
<asp:TemplateField HeaderText="卷册进度">
<ItemStyle Width="45%" />
<ItemTemplate>
<input id="hiRollStateID" runat="server" type="hidden" value='<%#DataBinder.Eval(Container.DataItem,"RollStateID") %>' />
</ItemTemplate>
</asp:TemplateField>
后台:
protected void lpdgEnd_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
int rollState = 0;
rollState = Convert.ToInt16((e.Row.FindControl("hiRollStateID") as System.Web.UI.HtmlControls.HtmlInputHidden).Value);
//rollState =Convert.ToInt16( e.Row.Cells[8].Text.ToString());
System.Web.UI.HtmlControls.HtmlContainerControl div1 = new HtmlGenericControl();
div1.InnerHtml = GetRollStateDiv(rollState);
// Page.Controls.Add(div1);
e.Row.Cells[7].Controls.Add(div1);
}
}
效果图:
三 样式进度条
这种进度条的定义非常简单,且优化性能,定义一个样式即可
<asp:TemplateField HeaderText="设计(%)" ItemStyle-Width="170px">
<ItemTemplate>
<asp:LinkButton ID="lbtnDesign" runat="server">
<span class="kpms-complete"><span class="kpms-completed" style=" width:<%#Eval("FinishRate") %>px"></span></span>
</asp:LinkButton>
<asp:Label ID="lblDesignSch" runat="server" Text='<%#Convert.ToDecimal(DataBinder.Eval(Container.DataItem,"FinishRate")).ToString("F2")+"%" %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
进度条需要的样式如下:
/*进度条*/
.kpms-complete{ width:100px; border:#ccc 1px solid; background:#fff; height:15px;display:inline-block; float:left;}
.kpms-completed{ background:#0C0; height:15px;display:block;}