关于DataGrid中的进度条的显示

 有时候我们会需要在报表中用图片的方式显示项目的进度，例如用进度条，所以我做了一个练习

 

一 传统进度条

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;}