现在的位置: 首页 > 综合 > 正文

gridView 多余字符显示省略号…

2012年10月11日 ⁄ 综合 ⁄ 共 5242字 ⁄ 字号 评论关闭
  ///<summary>
/// 多余的字用...显示
///</summary>
///<param name="GridView1"></param>
///<param name="title">要缩略显示的数据列名称</param>
///<param name="cell">位于gridView表格的列</param>
///<param name="pageNum">一页中要显示的数据项个数</param>
///<param name="len">字符长度</param>
public static void viewStr(GridView GridView1,DataTable dt, string title,int cell,int pageNum,int len)
{
if (GridView1.Rows.Count-1 > 0)
{
for (int i = 0; i <= GridView1.Rows.Count - 1; i++)
{
DataRowView row;
string str = "";
if (GridView1.PageIndex == 0)
{
row = dt.DefaultView[i];
str = Convert.ToString(row[title]);
GridView1.Rows[i].Cells[cell].Text = subStr(str, len);
}
else
{
row = dt.DefaultView[i + pageNum * GridView1.PageIndex];
str = Convert.ToString(row[title]);
GridView1.Rows[i].Cells[cell].Text = subStr(str, len);

}
}
}
}
private static string subStr(string str, int leng)
{
if (str.Length <= leng)
{
return str;
}
string sNewStr = str.Substring(0, leng);
sNewStr = sNewStr + "...";
return sNewStr;
}

 

GridView 长文本显示省略号
概述: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> 

 

【上篇】
【下篇】

抱歉!评论已关闭.