鼠标指向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,便于以后使用 先上图片大体展示实现效果: 再上代码,展示 ...
随机推荐
- 四 AndEngine 画线
package com.example.AndEngineExample02; import org.anddev.andengine.engine.Engine;import org.anddev. ...
- Android 着色器 Tint 研究
Tint 这个东西 主要用来减少apk体积的,比如说我现在有一个textview,他的背景图 有两种,一种是当获得焦点时显示的a图,另一种是 失去焦点时显示的b图. 相信大家开发的时候 这种需求做过很 ...
- 使用C#代码发起K2 Blackpearl流程
转:http://www.cnblogs.com/dannyli/archive/2011/08/02/2125285.html 使用C#代码,发起一个K2的流程,其形式和链接SQL Server数据 ...
- 1、c#中可以有静态构造方法，而java中没有，例如在单例模式中c#可以直接在静态构造中实例化对象，而java不可以
1.c#中可以有静态构造方法,而java中没有,例如在单例模式中c#可以直接在静态构造中实例化对象,而java不可以
- Golang连接Oracle数据库
Golang连接Oracle的库有很多,比较常见的如下: 不过,oralce 只提供了 oci8 的接口,必须通过它来调用,所以下面方案都逃不过相关设置. 1.go-db-oracle 地址: htt ...
- Raspberry Pi3 ~ 搭建开发环境
关于树莓派的开发环境 纠结了一些时间 ,我的是raspberry Pi 3 mode b 在官网下载 noobs (raspbain 版本)的. 安装完成之后接上显示器 启动系统 然后最初我是想在这个 ...
- cefSharp在XP下使得程序崩溃记录
前言:这是一个奇葩的问题,到现在自己还没有搞明白问题出现在哪里,但是从问题总算是解决了,希望看到此文章的大牛,如果知道问题出在什么地方,可以告知一下. [一个在XP系统下面应用程序崩溃问题] 资源: ...
- js 判断页面是否加载完成
javascript代码如下: document.onreadystatechange = subSomething; //当页面加载状态改变的时候执行这个方法 function subSomethi ...
- Cloudera Manager5安装总结遇到问题及解决办法
安装过程中,由于网络终端,导致下面问题: 问题1:安装停止在获取安装锁/tmp/scm_prepare_node.tYlmPfrT using SSH_CLIENT to get the SCM ho ...
- 远程连接mongodb出现 no route to host 和 Connection refused
部署好mongodb服务器后,在客户端安装好php的mongodb扩展,用程序连接mongodb服务器出错:no route to host.搜索了差不多一天的时候都没有相关的解决方法.最后在mong ...