使用GridView显示进度图片和进度文字的例子
本文主要实例采用CSS将文字显示在图片上的技术。直接复制下面的代码，粘贴成测试文件，直接浏览器即可。
ASPX 代码
<%@ Page Language="C#" EnableViewState="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
System.Data.DataTable dt = new System.Data.DataTable();
System.Data.DataRow dr;
//测试用显示字段
dt.Columns.Add(new System.Data.DataColumn("1月", typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn("2月", typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn("3月", typeof(System.String)));
//测试用进度数据
String[] x = { "10%", "20%", "50%", "80%", "90%", "100%" };
Random r = new Random();
for (int i = 0; i < 8; i++)
{
dr = dt.NewRow();
dr[0] = x[r.Next(0, x.Length)];
dr[1] = x[r.Next(0, x.Length)];
dr[2] = x[r.Next(0, x.Length)];
dt.Rows.Add(dr);
}
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>使用 GridView 显示进度图片和进度文字的例子</title>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="1月">
<ItemTemplate>
<div style="position: relative; width: 200px;"><img alt="" src="/2012/0406/20120406090706259.jpg" width="<%#Eval("1月") %>" height="20" /><br />
<div style="width: 200px; position: absolute; z-index: 100; top: 0px; text-align: center;"><%#Eval("1月")%></div>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="2月">
<ItemTemplate>
<div style="position: relative; width: 200px;"><img alt="" src="/2012/0406/20120406090706259.jpg" width="<%#Eval("2月") %>" height="20" /><br />
<div style="width: 200px; position: absolute; z-index: 100; top: 0px; text-align: center;"><%#Eval("2月")%></div>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="3月">
<ItemTemplate>
<div style="position: relative; width: 200px;"><img alt="" src="/2012/0406/20120406090706259.jpg" width="<%#Eval("3月") %>" height="20" /><br />
<div style="width: 200px; position: absolute; z-index: 100; top: 0px; text-align: center;"><%#Eval("3月")%></div>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</form>
</body>
</html>
作者 孟宪会
补充：Web开发 , ASP.Net ,
