需求： 当GRIDVIEW数据列过多，不方便全部显示在同一行或者一些子信息需要鼠标指向某关键列GRIDVIEW的时候显示其子信息。
设计：先把需要显示的浮动数据一次过抓取出来。而不是鼠标指向的时候才从数据库中取，否则鼠标指得太快以影响页面反应，降低用户体验。
效果如下图：为了方便理解这里只显示两列。而且大家可以根据实际需要进行相应的调弹出DIV的实际内容。（转载请注明出处）
当鼠标指向订单号的同时，弹出该订单号的其它信息。鼠标移走，则消失。
下面是相应的代码。代码很简单，但我相信很多用户有此需求。有些CSS代码是多余的，大家可以根据需要去掉。如有不明白的地方请留言。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebFrom.aspx.cs" Inherits="WebFrom" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
#main
{
width: 980px;
margin: auto;
padding-top: 30px;
}
table
{
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
width: 100%;
line-height: 30px;
} table, table td, table th
{
border: 1px solid #c9c9c9;
border-collapse: collapse;
} table th
{
font-size: 13px;
font-weight: bold;
color: #fff;
background-color: #777;
height: 35px;
line-height: 35px;
padding: 3px 5px;
display: table-cell;
vertical-align: inherit;
border: 1px solid #c9c9c9;
border-collapse: collapse;
}
table td
{
padding: 10px;
}
.evenRow
{
background: #eee;
}
.hiddenrow
{
display: none;
}
.viewmore
{
cursor: pointer;
color: #c00000;
font-weight: bold;
}
table td input.f-input
{
display: none;
width: 75px;
}
.update, .cancel
{
display: none;
}
.detail
{
display: none;
width: 500px;
margin: auto;
} .Toptable
{
width:60%;
border-color: gray;
line-height: 25px;
}
.showdetail
{
cursor: pointer;
}
#tooltip
{
position: absolute;
border-left: 5px solid #aaa;
border-right: 5px solid #aaa;
border-top: 5px solid #777;
border-bottom: 5px solid #777;
background: #fffff6;
padding: 10px;
display: none;
color: #000;
font-size: 12px;
line-height: 18px;
}
</style>
<script type="text/javascript" src="js/jquery1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function () { $(".showdetail").mouseover(function (e) {
var html = $(this).siblings("div").html();
var tooltip = "<div id='tooltip'>" + html + "</div>";
$("body").append(tooltip);
$("#tooltip").css({
"top": (e.pageY + 10) + "px",
"left": (e.pageX + 20) + "px"
}).show("fast");
}).mouseout(function () {
$("#tooltip").remove();
}).mousemove(function (e) {
$("#tooltip").css({
"top": (e.pageY + 10) + "px",
"left": (e.pageX + 20) + "px"
});
}); }); </script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField HeaderText="OrderId">
<ItemTemplate>
<asp:Label ID="Label2" CssClass="showdetail" runat="server" Text='<%#Eval("OrderId") %>'></asp:Label>
<div class="detail">
<table class="Toptable">
<tr>
<td>
Rate:
</td>
<td>
<%#Eval("Rate")%>
</td>
<td>
CommitUser:
</td>
<td>
<%#Eval("CommitUser")%>
</td>
<td>
Quantity:
</td>
<td>
<%#Eval("Quantity")%>
</td>
</tr>
<tr>
<td>
RequestDate:
</td>
<td>
<%#Eval("RequestDate")%>
</td>
<td>
CommitDate:
</td>
<td>
<%#Eval("CommitDate")%>
</td>
<td>
CommitDate:
</td>
<td>
<%#Eval("CommitDate")%>
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="LineNumber" HeaderText="LineNumber" SortExpression="LineNumber" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>