用户提出了这样一个需求:把测试数据和标准数据比较,对于大于标准数据的部分在网格中用红色表示出来,并且当鼠标放到这个数据上后,能在旁边显示详细信息(为什么超出标准等?)
要实现这样的效果,对于gridview的数据绑定只能是动态的,因为要在绑定的同时做出数据信息的判断,如果符合规则,就为该cell显示红色。
而要实现自定义鼠标提示效果,也很简单,只不过多了一个异步操作的动作,这里采用AjaxPro2.Dll实现异步操作。同时用一个div来承载要显示的详细信息,其位置跟随鼠标当前事件位置(javascript 中event对象的应用)。
可以看到,这里用到了javascript + css+ajax等等知识点:
下面是一个小的Demo,用来实例说明这样的效果:
效果显示:
![](https://p-blog.csdn.net/images/p_blog_csdn_net/JustLovePro/a.JPG)
HTML:
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
runat
="server"
>
<
title
>
无标题页
</
title
>
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<
script
type
="text/javascript"
>
...
function showTip(oevent,address)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
var div=document.getElementById('div2');
var result=DbOp.getDetail(address).value;
var arrs=result.split(",");
var show="The ID IS :"+arrs[0]+"<br>"+"The name IS :"+arrs[1];
div.innerHTML=show;
div.style.visibility="visible";
div.style.left=oevent.clientX+5;
div.style.top=oevent.clientY+5;
}
function hidTip(oevent)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
var div=document.getElementById('div2');
div.style.visibility="hidden";
}
</
script
>
</
head
>
<
body
>
<
form
id
="form1"
runat
="server"
>
<
div
>
<
div
id
="divshow"
runat
="server"
>
</
div
>
<
div
id
="div2"
runat
="server"
style
=" border :solid 1px red; background :#f0f0f0; visibility :hidden ; position :absolute"
>
xxxxx
</
div
>
</
div
>
</
form
>
</
body
>
</
html
>
CS:
protected
void
Page_Load(
object
sender, EventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(DbOp));
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
if (!IsPostBack)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
setBind();
}
}
private
void
setBind()
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
DAL.ISDApp01 cDal=new DAL.ISDApp01();
string sql = "select * from test";
DataTable dt = cDal.ExecuteQuery(sql).Tables[0];
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
GridView gv = new GridView();
gv.AutoGenerateColumns = false;
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
BoundField bf = null;
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
for (int i = 0; i < dt.Columns.Count; i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
bf = new BoundField();
bf.DataField = dt.Columns[i].ColumnName;
bf.HeaderText = dt.Columns[i].ColumnName;
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
gv.Columns.Add(bf);
}
gv.DataSource = dt;
gv.DataBind();
for (int i = 0; i < dt.Rows.Count; i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
gv.Rows[i].Cells[2].ForeColor = System.Drawing.Color.Red;
string address = dt.Rows[i][2].ToString();
gv.Rows[i].Cells[2].Attributes.Add("onMouseover","showTip(event,'"+address+"')");
gv.Rows[i].Cells[2].Attributes.Add("onMouseout", "hidTip(event)");
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
divshow.Controls.Add(gv);
}
异步操作类:DbOp.cs
public
class
DbOp
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
public DbOp()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
//
//TODO: 在此处添加构造函数逻辑
//
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
[AjaxPro.AjaxMethod]
public static string getDetail(string address)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
string sql = "select * from test where address='"+address+"'";
DAL.ISDApp01 cDal = new DAL.ISDApp01();
DataTable dt = cDal.ExecuteQuery(sql).Tables[0];
string id = dt.Rows[0][0].ToString();
string name = dt.Rows[0][1].ToString();
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
string s = id + "," + name;
return s;
}
}
同时要注意,要使用这个ajaxpro.dll组件,首先要添加引用ajax.pro.2.dll
然后在web.config的httpHandlers中,加入
<
httpHandlers
>
<!--
Register the ajaxpro for .NET 2.0 handler
-->
<
add
verb
="POST,GET"
path
="ajaxpro/*.ashx"
type
="AjaxPro.AjaxHandlerFactory, AjaxPro.2"
/>
</
httpHandlers
>