gridview 长文本显示省略号弹出div层

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

RSS

gridview 长文本显示省略号弹出div层

2018年04月09日 ⁄ 综合 ⁄ 共 3627字 ⁄ 字号小中大 ⁄ 评论关闭

概述：1.gridview某列文本长度超过某值显示省略号

2.但鼠标移动到该列单元格时弹出div层，显示全部信息

其实网上有很类似到资料，不过没有看见完整的，容易用的，所以也小费了点力气！

效果图

1. gridview某列文本长度超过某值显示省略号

主要说利用服务器端绑定数据时做字符串处理，过长到显示“......”省略号。同时完整信息存放在一个隐藏到div中，为2步做准备。

绑定的处理代码（详细看下面到例子）

<%# Eval("ProductName").ToString().Length > 10 ? Eval("ProductName").ToString().Substring(0,10) + "..." : Eval("ProductName").ToString() %>

其中ProductName 是绑定到数据库表到列名。

2.鼠标移动到该列单元格时弹出div层，显示全部信息

当鼠标移动到该列到单元格时触发onmouseover事件，获取鼠标的坐标用来初始化div到坐标。用document.createElement()创建div元素，设置div到属性，最主要到是 position:absolute(这里用div分层应该能做不过对这个还不熟悉)。在onmouseout的处理方法中删除该div：document.body.removeChild(div_green);//参数是i

3 .下面说完整的例子

数据库用的说nothwind 的表 Order Details Extended

<%@ 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 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>

【上篇】权限控制 static Dictionary
【下篇】URL Rewrite（4）：不同级别URL Rewrite的一些细节与特点

作者: chenpeigang1978

该日志由 chenpeigang1978 于6年前发表在综合分类下，最后更新于 2018年04月09日.
转载请注明: gridview 长文本显示省略号弹出div层 | 学步园 +复制链接

抱歉!评论已关闭.

学步园