鼠标指向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,便于以后使用 先上图片大体展示实现效果: 再上代码,展示 ...
随机推荐
- MVC和WebApi 使用get和post 传递参数。
我们总结一下用js请求服务器的传参方法. Get方式 Get主要是用来查询,一般分为无参,一个参数,多个参数,实体对象参数. 1.无参 //Get没有参数 var get_f1 = function( ...
- 【C++】非原创|统计代码覆盖率(一:C++)
也是转别人的,因为我c++好菜好菜啊... http://blog.chinaunix.net/uid-23741326-id-3316943.html c++跟C基本是一样的,统计覆盖率,需要生成g ...
- ifstream 流 判断文件是否结尾的函数eof(.xml
pre{ line-height:1; color:#800080; font-size:16px;}.sysFunc{color:#627cf6;font-style:italic;font-wei ...
- iOS学习笔记之Category
iOS学习笔记之Category 写在前面 Category是类别(也称为类目或范畴),使用Category,程序员可以为任何已有的类添加方法.使用类别可以对框架提供的类(无法获取源码,不能直接修改) ...
- 提问:"~"运算符
本人有一段代码关于"~"运算符 public class m{ public static void main(String[] args){ int x=~5; System.o ...
- 把一个序列转换成严格递增序列的最小花费 CF E - Sonya and Problem Wihtout a Legend
//把一个序列转换成严格递增序列的最小花费 CF E - Sonya and Problem Wihtout a Legend //dp[i][j]:把第i个数转成第j小的数,最小花费 //此题与po ...
- c++ 对象内存布局详解
今天看了的,感觉需要了解对象内存的问题.参考:http://blog.jobbole.com/101583/ 1.何为C++对象模型? 引用<深度探索C++对象模型>这本书中的话: 有两个 ...
- (转)oracle字符集与汉字
Oracle与汉字问题与字符集 分类: oracle 2012-10-29 17:31 425人阅读 评论(0) 收藏 举报 Oracle字符集引起的几个问题,常见的就是汉字占多少个字节,其次就是字符 ...
- Numpy矩阵取列向量
>>> A=matrix("1 2;3 4") >>> A matrix([[1, 2], [3, 4]]) >>> A[:, ...
- poj 3299 Humidex
直接套公式就可以,可我套公式第一遍都错了,英语差的孩子伤不起(┬＿┬) #include <iostream> #include <cmath> #include <io ...