GridView使用技巧之:如何只绑定特定长度的文本?

    前言:在我们做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 >

  从上面的代码可以看出,我绑定Label控件的Text属性的时候用了条件表达式,当数据库中的标题长度大于16时,则截取前16个字符加上省略号进行显示,当小于16时,就全部绑定.ToolTip属性直接帮定标题字段,鼠标移上去就可显示全部标题了。(题外话,如果你作的是新闻发布系统,你也可以在Text属性的后面再加上一个发布日期的绑定字段,这样标题,日期全出来聊,呵呵,可以灵活应用,举一反三)

  就这样简单,希望对初学者有所启发,:)
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值