概述：1.gridview某列文本长度超过某值显示省略号
2.但鼠标移动到该列单元格时弹出div层，显示全部信息
其实网上有很类似到资料，不过没有看见完整的，容易用的，所以也小费了点力气！
1. gridview某列文本长度超过某值显示省略号
主要说利用服务器端绑定数据时做字符串处理，过长到显示“......”省略号。同时完整信息存放在一个隐藏到div中，为2步做准备。
绑定的处理代码（详细看下面到例子）
view plaincopy to clipboardprint?
<%# Eval("ProductName").ToString().Length > 10 ? Eval("ProductName").ToString().Substring(0,10) + "..." : Eval("ProductName").ToString() %>
<%# Eval("ProductName").ToString().Length > 10 ? Eval("ProductName").ToString().Substring(0,10) + "..." : Eval("ProductName").ToString() %>
其中ProductName 是绑定到数据库表到列名。
注意：必须用Eval绑定，用Bind绑定数据会出现错误，绑定数据最好用模板列，这样在模板列中插入lable标签来显示数据，因为lable标签有tootip属性，可以用它来显示完整的内容，而本身的text属性绑定带“...”的内容
例子：
<asp:TemplateField HeaderText="文件编号">
<HeaderTemplate>
文件编号<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/PageImage/arrow_up.gif" CommandName="X" CommandArgument="FileNumber" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" ToolTip='<%# Bind("FileNumber") %>' Text='<%# Bind("FileNumber") %>'></asp:Label>
</ItemTemplate>
<ItemStyle Width="100px" />
</asp:TemplateField>
2.鼠标移动到该列单元格时弹出div层，显示全部信息
当鼠标移动到该列到单元格时触发onmouseover事件，获取鼠标的座标用来初始化div到座标。用document.createElement()创建div元素，设置div到属性，最主要到是 position:absolute(这里用div分层应该能做不过对这个还不熟悉)。在onmouseout的处理方法中删除该div：view plaincopy to clipboardprint?
document.body.removeChild(div_green);//参数是i
document.body.removeChild(div_green);//参数是i
3 .下面说完整的例子
数据库用的说nothwind 的表 Order Details Extended
view plaincopy to clipboardprint?
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridviewDiv.aspx.cs" Inherits="GridviewDiv" %>
<!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>
<mce:style type="text/css"><!--
.menuClass
{
background-color:green;
filter:alpha(opacity=50);
margin-top:-2;
width:98px;
position:absolute;
}
--></mce:style><style type="text/css" mce_bogus="1">.menuClass
{
background-color:green;
filter:alpha(opacity=50);
margin-top:-2;
width:98px;
position:absolute;
}</style>
<mce:script type="text/javascript" language ="javascript"><!--
function ShowRec()
{
//取得鼠标座标
var x,y;
if(!document.all)
{
x=pageX;
y=pageY;
}
else
{
x=document.body.scrollLeft+event.clientX; //鼠标X轴的值
y=document.body.scrollTop+event.clientY; //鼠标Y轴的值
// alert(x+"--"+y)
}
//创建div 设定它到属性
var div = document.createElement("div");
div.style.top = y-10;
div.style.left = x+10;
// div.style.background="green";
div.id="div_green";
div.className = "menuClass";//层样式
document.body.appendChild(div);
//获取存放完整信息的div
var ele = event.srcElement;
var rec = ele.nextSibling;
div.innerHTML =rec.innerHTML ;
// var ele = event.srcElement;
// var rec = ele.nextSibling;
// rec.style.display = '';
// if(rec)
// {
// if(rec.style.display ='none')
// {
// rec.style.display = '';
// }
// else
// {
// rec.style.display ='none';
// }
// }
}
function DropDiv()
{
//删除div
document.body.removeChild(div_green);//参数是i
}
// --></mce:script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" DataKeyNames="OrderID,ProductID"
DataSourceID="SqlDataSource1" Width="399px" AllowPaging="True">
<Columns>
<asp:BoundField DataField="OrderID" HeaderText="OrderID" ReadOnly="True" SortExpression="OrderID" />
<asp:BoundField DataField="ProductID" HeaderText="ProductID" ReadOnly="True" SortExpression="ProductID" />
<asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" >
</asp:BoundField>
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" />
<asp:BoundField DataField="Quantity" HeaderText="Quantity" SortExpression="Quantity" />
<asp:BoundField DataField="Discount" HeaderText="Discount" SortExpression="Discount" />
<asp:BoundField DataField="ExtendedPrice" HeaderText="ExtendedPrice" ReadOnly="True"
SortExpression="ExtendedPrice" />
<asp:TemplateField HeaderText="标题" SortExpression="ProductName">
<ItemTemplate>
<a onmouseout="DropDiv();" onmouseover="ShowRec();" > <%# Eval("ProductName").ToString().Length > 10 ? Eval("ProductName").ToString().Substring(0,10) + "..." : Eval("ProductName").ToString() %> </a>
<div id="divRec" style="display:none" mce_style="display:none"> <%# DataBinder.Eval(Container.DataItem, "ProductName")%> </div>
</ItemTemplate>
<ItemStyle Width="360px" Wrap="False" />
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT * FROM [Order Details Extended]"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/jjjjj102310253/archive/2009/02/04/3862354.aspx