前言:在我们做WEB开发 的过程中,经常会遇到GridView中的某些字段太长了,如果全部显示出来就会使排版混乱,影响美观,尤其是在我们做新闻系统时肯定会遇到,比如显示新闻列表的gridview,页面的版面已设计美观,但是有的新闻标题过长,我们希望只显示一定长度,后面加省略号,然后当鼠标移上去时再显示标题的全部内容,这样就即做到了不影响版面的布局,又做到了标题内容的全部显示.
下图是我做的规则显示的效果图,有些规则太长,我要做到的是,当标题超出一定长度时我加省略号,当标题在一定长度范围内时,全标题显示:
效果如上,那么这种效果我们如何实现呢?,在GridView绑定的时候要做什么工作?
接下来我们来看实现思路:其实说起来很简单,我们在这里将采用模板列,在模版列里拖入一个label控件来进行数据绑定,它的text属性绑定的时候用一个条件表达式来判断是全部绑定标题文字还是只绑定部分标题文字+省略号;它的tooltip属性就直接绑定标题字段,这样我们的鼠标移上去就可以显示标题的全部内容了,绑定代码如下:
<
asp:GridView
ID
="GridView1"
runat
="server"
AutoGenerateColumns
="False"
DataKeyNames
="RuleId"
Width
="100%"
ShowHeader
="False"
GridLines
="None"
>
< Columns >
< asp:TemplateField >
< ItemStyle Width ="60px" />
< ItemTemplate >
< asp:Label ID ="Label1" runat ="server" Font-Bold ="True" ForeColor ="Green" Text ='<%# Eval("RuleOrder") % > '> </ asp:Label >
</ ItemTemplate >
</ asp:TemplateField >
< asp:TemplateField HeaderText ="规则标题" >
< ItemStyle HorizontalAlign ="Left" VerticalAlign ="Middle" CssClass ="grid1" Height ="20px" />
< ItemTemplate >
< asp:HyperLink ID ="HyperLink1" runat ="server" NavigateUrl ='<%# Eval("HtmlPath") % > ' ToolTip=' <% ... # Eval("RuleTitle") %> '
Text=' <% ... # Eval("RuleTitle").ToString().Length>16?Eval("RuleTitle").ToString().Substring(0,16)+"...":Eval("RuleTitle") %> ' Font-Bold="True"> </ asp:HyperLink >
</ ItemTemplate >
</ asp:TemplateField >
</ Columns >
</ asp:GridView >
< Columns >
< asp:TemplateField >
< ItemStyle Width ="60px" />
< ItemTemplate >
< asp:Label ID ="Label1" runat ="server" Font-Bold ="True" ForeColor ="Green" Text ='<%# Eval("RuleOrder") % > '> </ asp:Label >
</ ItemTemplate >
</ asp:TemplateField >
< asp:TemplateField HeaderText ="规则标题" >
< ItemStyle HorizontalAlign ="Left" VerticalAlign ="Middle" CssClass ="grid1" Height ="20px" />
< ItemTemplate >
< asp:HyperLink ID ="HyperLink1" runat ="server" NavigateUrl ='<%# Eval("HtmlPath") % > ' ToolTip=' <% ... # Eval("RuleTitle") %> '
Text=' <% ... # Eval("RuleTitle").ToString().Length>16?Eval("RuleTitle").ToString().Substring(0,16)+"...":Eval("RuleTitle") %> ' Font-Bold="True"> </ asp:HyperLink >
</ ItemTemplate >
</ asp:TemplateField >
</ Columns >
</ asp:GridView >
从上面的代码可以看出,我绑定Label控件的Text属性的时候用了条件表达式,当数据库中的标题长度大于16时,则截取前16个字符加上省略号进行显示,当小于16时,就全部绑定.ToolTip属性直接帮定标题字段,鼠标移上去就可显示全部标题了。(题外话,如果你作的是新闻发布系统,你也可以在Text属性的后面再加上一个发布日期的绑定字段,这样标题,日期全出来聊,呵呵,可以灵活应用,举一反三)
就这样简单,希望对初学者有所启发,:)