GridView 长文本显示省略号

最新推荐文章于 2018-07-02 14:34:00 发布

yytt123622

最新推荐文章于 2018-07-02 14:34:00 发布

阅读量1.6k

点赞数

分类专栏： GridView 文章标签： div asp server filter function xhtml

GridView 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

概述：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"></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"></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 οnmοuseοut="DropDiv();" οnmοuseοver="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

yytt123622

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
GridView 长文本显示省略号

概述：1.gridview某列文本长度超过某值显示省略号 2.但鼠标移动到该列单元格时弹出div层，显示全部信息其实网上有很类似到资料，不过没有看见完整的，容易用的，所以也小费了点力气！ 1. gridview某列文本长度超过某值显示省略号主要说利用服务器端绑定数据时做字符串处理，过长到显示“......”省略号。同时完整信息存放在一个隐藏到div
复制链接

扫一扫

专栏目录