效果如下图所示:
实现原理: 为DataGrid中的每一行,绑定onmouseover、onmousemove、onmouseout事件,使的鼠标移动到行内时,自动显示一个<div>,鼠标移出该行,就把这个<div>隐藏掉。 实现代码: 前台: 1. 定义<div>的样式: <style type="text/css"> .transparent { FILTER: alpha(opacity=85); BORDER-TOP: indianred 1px solid; BORDER-RIGHT: indianred 1px solid; BORDER-LEFT: indianred 1px solid; BORDER-BOTTOM: indianred 1px solid; POSITION: absolute; BACKGROUND-COLOR: infobackground; DISPLAY: none } </style> 2. 显示和隐藏窗体的脚本: <script language="javascript"> //显示弹出窗体 function Show(Country, City, Address, PostalCode, Phone, Fax) { document.getElementById("td1").innerText="国家:"+Country; document.getElementById("td2").innerText="城市:"+City; document.getElementById("td3").innerText="地址:"+Address; document.getElementById("td4").innerText="邮政编码:"+PostalCode; document.getElementById("td5").innerText="电话:"+Phone; document.getElementById("td6").innerText="传真:"+Fax; //获得鼠标的X轴的坐标 x = event.clientX + document.body.scrollLeft; //获得鼠标的Y轴的坐标 y = event.clientY + document.body.scrollTop + 20; //显示弹出窗体 Popup.style.display="block"; //设置窗体的X,Y轴的坐标 Popup.style.left = x; Popup.style.top = y; } //隐藏弹出窗体 function Hide() { //隐藏窗体 Popup.style.display="none"; } </script> 3. ToolTip窗体的代码 <div id="Popup" class="transparent" style=" Z-INDEX: 200"> <table border="0" cellpadding="0" style="FONT-SIZE: x-small"> <tr> <td align="middle" bgcolor="indianred"><font color="white">联系方式</font></td> </tr> <tr><td id="td1"></td></tr> <tr><td id="td2"></td></tr> <tr><td id="td3"></td></tr> <tr><td id="td4"></td></tr> <tr><td id="td5"></td></tr> <tr><td id="td6"></td></tr> </table> </div> 后台: private DataTable dt; private void Page_Load(object sender, System.EventArgs e) { // Put user code to initialize the page here if(!IsPostBack) { SqlConnection cnn = new SqlConnection(); cnn.ConnectionString = "data source=localhost;initial catalog=Northwind;password=;" +"persist security info=True;user id=sa;workstation id=APJ062;packet size=4096"; string cnn.Open(); SqlDataAdapter ad = new SqlDataAdapter(sqlstr,cnn); dt = new DataTable(); ad.Fill(dt);
grdCustomer.DataSource = dt; grdCustomer.DataBind(); } } private void grdCustomer_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e) { if(e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item) { e.Item.Attributes.Add("onmouseover", "this.oldcolor=this.style.backgroundColor;this.style.backgroundColor='#C8F7FF';"); e.Item.Attributes.Add("onmousemove", "Show('"+dt.Rows[e.Item.ItemIndex]["country"].ToString()+"','" +dt.Rows[e.Item.ItemIndex]["City"].ToString()+"','" +dt.Rows[e.Item.ItemIndex]["Address"].ToString()+"','" +dt.Rows[e.Item.ItemIndex]["PostalCode"].ToString()+"','" +dt.Rows[e.Item.ItemIndex]["Phone"].ToString()+"','" +dt.Rows[e.Item.ItemIndex]["Fax"].ToString()+"');"); e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor=this.oldcolor;Hide();"); } }
sqlstr = "select Top 16 CustomerID, CompanyName, ContactTitle,Country,
City, Address,PostalCode,Phone,Fax from Customers";