鼠标指向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,便于以后使用 先上图片大体展示实现效果: 再上代码,展示 ...
随机推荐
- 响应式设计中几个class区别
table-responsive:在小屏幕时不对内容做任何额外排版,只是允许左右滑动 scrollable-area:先尝试挤压起来,实在不行再左右滑动
- C++重要知识点小结---2
C++重要知识点小结--1 :http://www.cnblogs.com/heyonggang/p/3246631.html 1.C++允许程序员声明一个不能有实例对象的类,这样的类惟一的用途是被继 ...
- Linux基本命令（9）定位、查找文件的命令
定位.查找文件的命令 命令 功能 命令 功能 which 从path中找出文件的位置 find 找出所有符合要求的文件 whereis 找出特定程序的路径 locate 从索引中找出文件位置 9.1 ...
- css3 --- 翻页动画 --- javascript --- 3d --- 准备
用css3和javascript做一个翻页动画<知识准备部分> 如有更多疑问请参照:http://www.imooc.com/learn/77 这是用css3的-webkit-transi ...
- 【LeetCode】88 - Merge Sorted Array
Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note:Yo ...
- java 开发环境
jdk:包括jre,自己下载即可. 客户端只需安装jre即可. 安装路径:C:\jdk7.0\jdk1.7.0_25\bin (适时更改) 环境变量是从前往后找 测试成功:cmd java ...
- 了解JBoss Drools Engine
说一个自己比较喜欢的开源产品JBoss Drools, 很多企业内部大型项目都在使用的规则引擎该怎么理解规则引擎,到底是个什么东西,我好像没听过,我们能用么. 它是配有内置算法及对应数据结构的计算容器 ...
- （翻译）从底层了解ASP.NET体系结构 [转]
转自:http://www.cnblogs.com/rijing2004/archive/2007/09/14/howaspnetwork.html 前言 关于ASP.NET的底层的工作机制,最近园子 ...
- koa redis 链接
koa 是新一代框架 npm install koa-redis 代码如下 var koa = require('koa'); var http = require('http'); var sess ...
- 游戏模块分析总结（2）之UI、操作篇
转自:http://www.gameres.com/309812.html 游戏模块分析总结(2)之UI.操作篇 发布者: wuye | 发布时间: 2014-12-12 15:03| 评论数: 0 ...