在GridView中为特定的信息加色，鼠标放上后显示详细信息（转）
http://blog.csdn.net/JustLovePro/archive/2008/05/19/2459432.aspx
用户提出了这样一个需求：把测试数据和标准数据比较，对于大于标准数据的部分在网格中用红色表示出来，并且当鼠标放到这个数据上后，能在旁边显示详细信息（为什么超出标准等？）
要实现这样的效果，对于gridview的数据绑定只能是动态的，因为要在绑定的同时做出数据信息的判断，如果符合规则，就为该cell显示红色。
而要实现自定义鼠标提示效果，也很简单，只不过多了一个异步操作的动作，这里采用AjaxPro2.Dll实现异步操作。同时用一个div来承载要显示的详细信息，其位置跟随鼠标当前事件位置（javascript 中event对象的应用）。
可以看到，这里用到了javascript + css+ajax等等知识点：
下面是一个小的Demo,用来实例说明这样的效果：
效果显示：
HTML:
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">
<title>无标题页</title>
<script type ="text/javascript" >
function showTip(oevent,address)
{
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)
{
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)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(DbOp));
if (!IsPostBack)
{
setBind();
}
}
private void setBind()
{
DAL.ISDApp01 cDal=new DAL.ISDApp01();
string sql = "select * from test";
DataTable dt = cDal.ExecuteQuery(sql).Tables[0];
GridView gv = new GridView();
gv.AutoGenerateColumns = false;
BoundField bf = null;
for (int i = 0; i < dt.Columns.Count; i++)
{
bf = new BoundField();
bf.DataField = dt.Columns[i].ColumnName;
bf.HeaderText = dt.Columns[i].ColumnName;
gv.Columns.Add(bf);
}
gv.DataSource = dt;
gv.DataBind();
for (int i = 0; i < dt.Rows.Count; i++)
{
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)");
}
divshow.Controls.Add(gv);
}
异步操作类：DbOp.cs{
AjaxPro.Utility.RegisterTypeForAjax(typeof(DbOp));
if (!IsPostBack)
{
setBind();
}
}
private void setBind()
{
DAL.ISDApp01 cDal=new DAL.ISDApp01();
string sql = "select * from test";
DataTable dt = cDal.ExecuteQuery(sql).Tables[0];
GridView gv = new GridView();
gv.AutoGenerateColumns = false;
BoundField bf = null;
for (int i = 0; i < dt.Columns.Count; i++)
{
bf = new BoundField();
bf.DataField = dt.Columns[i].ColumnName;
bf.HeaderText = dt.Columns[i].ColumnName;
gv.Columns.Add(bf);
}
gv.DataSource = dt;
gv.DataBind();
for (int i = 0; i < dt.Rows.Count; i++)
{
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)");
}
divshow.Controls.Add(gv);
}
public class DbOp{ public DbOp() { // //TODO: 在此处添加构造函数逻辑 // } [AjaxPro.AjaxMethod] public static string getDetail(string address) { 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(); 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>
