鼠标指向GridView某列显示DIV浮动列表
需求： 当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>
鼠标指向GridView某列显示DIV浮动列表的更多相关文章
- 鼠标划过用户名时在鼠标右下角显示div展示用户资料
最近做一个网站论坛,为了方便会员之间相互了解,又不想再做一个页面展示用户资料,就想到了鼠标划过用户名时在鼠标右下角显示div展示用户资料这个效果, 这里要注意的该方法不是给每个用户名的旁边都绑定一个d ...
- Jquery的鼠标移动上去显示div，鼠标离开的时候隐藏div效果
有时候我们需要这个效果:当鼠标放上去的时候显示一个div,当鼠标移走的时候就将div隐藏了.代码如下,记得引入Jquyer库.(当鼠标移动到id=menu的div上的时候,显示id=list的div, ...
- CSS鼠标悬浮DIV后显示DIV外的按钮
昨天写样式遇到个问题,如何让鼠标悬浮DIV后,显示DIV外的按钮,可以点击到按钮. 效果如下: 问题: 在DIV hover时候将按钮设为display: block,这是很直接的想法,但是这有个问题 ...
- yii2-basic后台管理功能开发之三：自定义GridView列显示
在第二篇 yii2-basic后台管理功能开发之二:创建CRUD增删改查 中,我们利用gii工具生成的结果一般并不是我们想要的结果. 我们需要根据自己的需求自定义列显示.我遇到的主要是一下变更: 时间 ...
- 如何在asp.net中获取GridView隐藏列的值？
在阅读本文之前,我获取gridview某行某列的值一般做法是这样的:row.Cells[3].Text.ToString().有点傻瓜呵呵 在Asp.net 2.0中增加了一个新的数据绑定控件:Gri ...
- VS2003 下GridControl的列显示成图片+文字的形式实现
public RC_CustomerSolicitListUC() { // 该调用是 Windows.Forms 窗体设计器所必需的. InitializeComponent(); // TODO: ...
- 关于div 浮动在select，或table控件之上
<div style="position:absolute; display:none; z-index:99999" id="d3" onmouseov ...
- GridView 根据要求显示指定值
最近在写一个小项目用来练手恢复一下功力的,在Users表中有一个用户字段是状态,我使用"0"表示启用,“1”表示禁用, 存到数据库中, 由于之前有一段时间没写代码了,所以有点生疏了 ...
- 【j2ee】div浮动层拖拽
背景:近期项目中需要实现弹出浮层增加数据,并且浮动层可以拖拽 解决步骤:1.浮动层实现 2.拖拽实现 多方查资料,基本实现功能,现做demo,便于以后使用 先上图片大体展示实现效果: 再上代码,展示 ...
随机推荐
- Nodejs学习之一 下载安装与部署nodejs
1,下载nodejs 访问nodejs官网 www.nodejs.org/download/ 下载与机器相匹配的版本 2,安装nodejs 下载下来的msi包一直点击下一步即可 3,部署环 ...
- JS模块化编程之AMD规范（转）
随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...
- 【转】使用Xcode中的iOS SDK给iphone开发出第一个App程序
之前已经折腾过用Xcode开发OS X的程序了,现在继续折腾,用iOS SDK开发移动设备(iphone/ipad/ipod touch)的程序. 1.从iOS Developer Library中找 ...
- 无法启动ArcSDE服务
ArcSDE服务启动错误:Error (-327), No ArcSDE server license found解决方法:>sdesetup -o update_key -d oracle10 ...
- Javascript中的Keycode值列表
关于如何得到一个键在Javascript中的Keycode值,可以参考: <body onkeypress=alert(event.keyCode)>请按任意键,你将得到该键的键值! ke ...
- php.ini中Magic_Quotes_Gpc开关设置
如果你网站空间的php.ini文件里的magic_quotes_gpc设成了off,那么PHP就不会在敏感字符前加上反斜杠(\\),由于表单提交的内容可能含有敏感字符,如单引号('),就导致了SQL ...
- css overflow:hidden无效解决办法
解决方案:只需要在设定overflow:hidden层加入定位即可 position:relative;left:0px;top:0px
- JAVA CAS原理、unsafe、AQS
concurrent包的实现 由于java的CAS同时具有 volatile 读和volatile写的内存语义,因此Java线程之间的通信现在有了下面四种方式: A线程写volatile变量,随后B线 ...
- ORA-12516: TNS: 监听程序无法找到匹配协议栈的可用句柄解决方法
1.查看当前连接进程数SQL>select count(*) from v$process;2.查看连接数上限SQL>select value from v$parameter where ...
- PHP 解压zip文件的函数封装
/** * zip文件解压 * * @param $zipFilePath zip文件的路径,可以不加zip文件后缀.如果其他类型的文件伪装成zip解压也会失败 * @param $directory ...