怎么在GridView中限制显示字数

简介: 三种方法可以实现,前两种是C#代码实现(原理一样),第三种是CSS实现。1.cs代码中:GridView的RowDataBound中对想做处理的项做Remove()字符串截取。2.aspx页面中:GridView的<ItemTemplate>数据项模板标签对中对其控件内显示文本的相应属性做Eval绑定,同样以SubString为最终截取显示文本。如:<asp:Templa...

​三种方法可以实现,前两种是C#代码实现(原理一样),第三种是CSS实现。
1.cs代码中:GridView的RowDataBound中对想做处理的项做Remove()字符串截取。
2.aspx页面中:GridView的数据项模板标签对中对其控件内显示文本的相应属性做Eval绑定,同样以SubString为最终截取显示文本。
如:

<asp:TemplateField HeaderText="描述">
    <ItemTemplate>
        <asp:Label ID="lbl" runat="server" Text='<%#Eval("Description").ToString() >12?Eval("Description").ToString().Remove(10)+"...":Eval("Description").ToString() %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

3.CSS方式:此方式需要对GridView的每一列进行Width设定才可实现。
CSS样式如下:

.content
{
   
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /*以省略号替代截除部分*/
}

使用时,将该CSS样式赋予要截取字符串的列上即可。如:

<asp:TemplateField HeaderText="原因">
    <ItemTemplate>
        <asp:Label ID="lblDescription" runat="server" Text='<%#Eval("Description") %>' ToolTip='<%#Eval("Description").ToString() %>'></asp:Label>
    </ItemTemplate>
    <HeaderStyle Width="750px" Wrap="false" />
    <ItemStyle Wrap="false" HorizontalAlign="Left" CssClass="content" />
</asp:TemplateField>

三种方法的优缺点:
1.优点:灵活变通,无需要设定单元格宽度,代码集中管理;缺点:由于是后台代码方式实现,故修改后,DLL类库需要编译,对于维护而言较为不便。
2.优点:同1,缺点:同1,同时代码相对1较分散,不便管理。
3.优点:CSS方式实现,运用简单,使用方便。缺点:需要设定每一列的宽度。

三种方法各有利弊,需适不同情况选择最佳方案。

以上就是MySQL 版本号排序的介绍,做此记录,如有帮助,欢迎点赞关注收藏!

目录
相关文章
|
前端开发 测试技术
Easyui datagrid 设置内容超过单元格宽度时自动换行显示
Easyui datagrid 设置内容超过单元格宽度时自动换行显示
434 0
|
JavaScript 容器
rAF实现表格内容自动滚动
rAF实现表格内容自动滚动
325 1
关于 在word中插入表格跨页后每一页表格都显示标题栏 的解决方法
关于 在word中插入表格跨页后每一页表格都显示标题栏 的解决方法
关于 在word中插入表格跨页后每一页表格都显示标题栏 的解决方法
|
C#
WPF TextBox/TextBlock 文本超出显示时,文本靠右显示
原文:WPF TextBox/TextBlock 文本超出显示时,文本靠右显示 文本框显示 文本框正常显示: 文本框超出区域显示:    实现方案 判断文本框是否超出区域 请见《TextBlock IsTextTrimmed 判断文本是否超出》 设置文本布局显示 1.
1699 0
|
C#
WPF DataGrid 每行ComboBox 内容不同的设置方法
原文:WPF DataGrid 每行ComboBox 内容不同的设置方法 ...
1099 0
|
JavaScript
easyui-datagrid列的数据内容过长自动换行
在datagrid中添加一句,DataGrid属性中的nowrap:false。 (默认为true)。     JS文件: $('#_main_table').datagrid({ method:'get', ...
2772 0