GridView实现toolTip功能

最新推荐文章于 2019-07-27 19:12:46 发布

转载最新推荐文章于 2019-07-27 19:12:46 发布 · 172 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jame-peng1028/archive/2007/05/14/746464.html

文章标签：

#ui #xhtml #javascript #ViewUI

本文介绍了一个使用 ASP.NET 实现的 GridView 控件应用案例，其中包括了如何为 GridView 中的数据行添加鼠标悬停高亮效果以及点击时显示详细信息的弹窗功能。通过 JavaScript 和 CSS 的配合，实现了良好的用户体验。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

function selectkk()

{

var item = document.getElementById('Select1');

// window.alert("sddsdsd");

if(item.selectedIndex!=0)

{

window.alert(item.options[item.selectedIndex].text);

}

else

{

window.alert("is 0");

}

function showDetail(cell1,cell2)

{

document.getElementById('td1').innerText="Name:"+cell1;

document.getElementById('td2').innerText="Address:"+cell2;

//获得鼠标的X轴的坐标

x = event.clientX + document.body.scrollLeft;

//获得鼠标的Y轴的坐标

y = event.clientY + document.body.scrollTop+10;

//显示弹出窗体

Popup.style.display="block";

//设置窗体的X,Y轴的坐标

Popup.style.left = x;

Popup.style.top = y;

}

//隐藏弹出窗体

function hide()

{

//隐藏窗体

Popup.style.display="none";

}

</script>

.transparent

{ BORDER-RIGHT: indianred 1px solid;

BORDER-TOP: indianred 1px solid;

DISPLAY: none; FILTER: alpha(opacity=85);

BORDER-LEFT: indianred 1px solid;

BORDER-BOTTOM: indianred 1px solid;

POSITION: absolute;

BACKGROUND-COLOR: infobackground;

font-color;red;}

</style>

</head>

<body>

<div>

</caption>

<tr>

</td>

<option value="1">zhanpeng</option>

<option value="2">zhanjia</option>

</select>

</td>

</tr>

<tr>

</td>

</td>

</td>

</tr>

<tr>

</td>

 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound" Width="326px" OnRowCreated="GridView1_RowCreated">

<asp:BoundField DataField="Name" HeaderText="Name"/>

<asp:BoundField DataField="Address" HeaderText="Address" />

</Columns>

</asp:GridView>

</td>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</div>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!this.IsPostBack)

{

getDate();

}

public void getDate()

{

SqlConnection con = new SqlConnection("server=server01;database=test;uid=sa;pwd=sql");

con.Open();

SqlDataAdapter da = new SqlDataAdapter("select * from tab", con);

DataSet ds = new DataSet();

da.Fill(ds);

GridView1.DataSource = ds;

GridView1.DataBind();

}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow)

{

e.Row.Attributes.Add("onmouseover", "currentcolor=this.style.backgroundColor;this.style.backgroundColor='#C0C0FF';this.style.cursor='hand';showDetail('" + e.Row.Cells[0].Text + "','" + e.Row.Cells[1].Text + "')");

e.Row.Attributes.Add("onmouseout", "hide();this.style.backgroundColor=currentcolor;");

}

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)

{

//if (e.Row.RowType == DataControlRowType.DataRow)

//{

// e.Row.Attributes.Add("onmouseover", "currentcolor=this.style.backgroundColor;this.style.backgroundColor='#C0C0FF';this.style.cursor='hand';");

// ////当鼠标移走时还原该行的背景色

// //e.Row.Attributes.Add("onmouseover", "showDetail('" + e.Row.Cells[0].Text + "','" + e.Row.Cells[1].Text + "')");

// e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=currentcolor;hide();");

//}

}