关于DataGrid中的进度条的显示

来源：互联网发布：node pm2 使用编辑：程序博客网时间：2024/05/17 07:01

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

一传统进度条

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