有时候我们需要在Gridview行中某单元格设置提示，要求光标停留在这个单元格上时提示一直显示，没有时间限制，通过层来实现
参考文章：http://cuckoosnest.javaeye.com/blog/470127 （Javascript检测浏览器类型总结）
代码如下：
1） 页面代码：
<head runat="server">
<title>无标题页</title>
<script language="javascript" type="text/javascript">
function showTip(msg,e)
{
document.getElementById("tooltip").innerHTML = msg;
document.getElementById("tooltip").style.display = "block";
var left, top;
var cursorHeight = 22; //光标高度
var nav = function() {
var ua = navigator.userAgent.toLowerCase(), s, o = {};
if( s=ua.match(/msie ([/d.]+)/) ) {
o.ie = true;
o.info = "ie";
} else if( s=ua.match(/firefox//([/d.]+)/) ) {
o.ff = true;
o.info = "firefox";
} else if( s=ua.match(/chrome//([/d.]+)/) ) {
o.chrome = true;
o.info = "chrome";
} else if( s=ua.match(/opera.([/d.]+)/) ) {
o.opera = true;
o.info = "opera";
} else if( s=ua.match(/version//([/d.]+).*safari/) ) {
o.safari = true;
o.info = "safari";
}
if( s && s[1] ) {
o.version = parseFloat( s[1] );
} else {
o.version = 0;
}
o.info = (o.info?o.info:"") + "_" + o.version; // 获取版本
return o.info;
}();
if(!nav.indexOf("ie")>-1)
{
left = e.clientX + "px";
top = (e.clientY + cursorHeight) + "px";
}
else
{
left = window.event.x + document.body.scrollLeft + "px";
top = (window.event.y + document.body.scrollTop + cursorHeight) + "px";
}
document.getElementById("tooltip").style.left = left;
document.getElementById("tooltip").style.top = top;
}
function hideTip()
{
document.getElementById("tooltip").style.display = "none";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvList" runat="server" AutoGenerateColumns="False" OnRowDataBound="gvList_RowDataBound">
<Columns>
<asp:BoundField HeaderText="name" />
<asp:BoundField HeaderText="description" />
</Columns>
</asp:GridView>
</div>
<div id="tooltip" style="position: absolute; background-color: #FEFFE0; border: 1px solid black; padding: 5px 5px; clip: auto; font-size: 9pt; display: none;z-index:9999999">
</div>
</form>
</body>
2） 后台代码：
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
#region Set gridview data and bind data
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("name"));
dt.Columns.Add(new DataColumn("description"));
dt.Rows.Add("name1", "name1's description");
dt.Rows.Add("name2", "name2 description is /" name2's description /" ");
dt.Rows.Add("name3", "name3 description is /r/n /" name3's description /" ");
this.gvList.Columns.Clear();
System.Web.UI.WebControls.BoundField field = new BoundField();
field.DataField = "name";
field.HeaderText = "Name";
this.gvList.Columns.Add(field);
field = new BoundField();
field.DataField = "description";
field.HeaderText = "Description";
this.gvList.Columns.Add(field);
this.gvList.DataSource = dt;
this.gvList.DataBind();
#endregion
}
}
protected void gvList_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Cells[0].Text = string.Format("<a href=/"#/" οnmοuseοut=/"hideTip()/" οnmοuseοver=/"showTip('{0}',event)/" οnmοusemοve=/"showTip('{0}',event)/">{1}</a>",
e.Row.Cells[1].Text.Replace("'", @"/'").Replace("/"", """).Replace("/r/n", "<br>"), e.Row.Cells[0].Text);
}
}
3）测试在VS2005，XP，IE8，Firefox3.6, Safari3.1 环境中通过
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
