在GridView中为特定的信息加色，鼠标放上后显示详细信息

   用户提出了这样一个需求：把测试数据和标准数据比较，对于大于标准数据的部分在网格中用红色表示出来，并且当鼠标放到这个数据上后，能在旁边显示详细信息（为什么超出标准等？）
   要实现这样的效果，对于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

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 >