zoukankan      html  css  js  c++  java
  • gridView 多余字符显示省略号...

      ///<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;   
        98px;   
        position:absolute;   
    }   
    --></mce:style><style type="text/css" mce_bogus="1">.menuClass   
    {   
        background-color:green;   
        filter:alpha(opacity=50);   
        margin-top:-2;   
        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> 
  • 相关阅读:
    LintCode Python 简单级题目 488.快乐数
    LintCode Python 简单级题目 100.删除排序数组中的重复数字 101.删除排序数组中的重复数字II
    LintCode Python 简单级题目 373.奇偶分割数组
    LintCode Python 简单级题目 39.恢复旋转排序数组
    LintCode Python 简单级题目 35.翻转链表
    LintCode Python 简单级题目 451.两两交换链表中的节点
    LintCode Python 简单级题目 174.删除链表中倒数第n个节点
    aws查看官方centos镜像imageid
    linux shell脚本查找重复行/查找非重复行/去除重复行/重复行统计
    php配置优化-生产环境应用版
  • 原文地址:https://www.cnblogs.com/wifi/p/2247209.html
Copyright © 2011-2022 走看看