概述：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