适合GridView列中的长文本
fitting long text in GridView Column
我在ASP.NET网格视图列中显示长文本时遇到问题。我不希望文本换行到第二行,因为这是不换行的业务需求之一。
理想情况下,我想要某种基于服务器或客户端的代码,它可以帮助我将文本截断为列的大小,然后可能显示更多按钮或"…"获取更多文本?
当更多按钮或。。。被点击;出现一个弹出窗口,其中包含其余文本或全文。
注意:文本或字符串大小各不相同,长度可以是25到75个字符中的任何一个。
关于我应该如何实现上述目标,有什么想法吗?感谢
将此CSS类用于网格视图列
.ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
width: 50px;
display: block;
overflow: hidden;
}
它使。。。以特定的宽度在列的末尾。
更新
标记
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1"
AutoGenerateColumns="False" CssClass="employees-grid">
<Columns>
<asp:BoundField DataField="id" HeaderText="ID">
<ItemStyle CssClass="employees-grid-id" />
</asp:BoundField>
<asp:BoundField DataField="first_name" HeaderText="First Name">
<ItemStyle CssClass="employees-grid-first-name" />
</asp:BoundField>
<asp:BoundField DataField="last_name" HeaderText="Last Name">
<ItemStyle CssClass="employees-grid-last-name" />
</asp:BoundField>
<asp:BoundField DataField="email" HeaderText="Email">
<ItemStyle CssClass="employees-grid-email" />
</asp:BoundField>
<asp:BoundField DataField="note" HeaderText="Note">
<ItemStyle CssClass="employees-grid-note" />
</asp:BoundField>
</Columns>
</asp:GridView>
CSS
.employees-grid {
table-layout: fixed;
width: 100%;
}
.employees-grid-id {
width: 5%;
}
.employees-grid-first-name {
width: 10%;
}
.employees-grid-last-name {
width: 10%;
}
.employees-grid-email {
width: 15%;
}
.employees-grid-note {
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
overflow: hidden;
}
如果您关心格式化,我会构建我的查询(将GridView绑定到的查询),以便以两种形式返回数据。
Select Left(dataColumn, 20) as TruncatedData, dataColumn as FullData From table
然后,您可以将GridView绑定到TruncatedData列,并将工具提示绑定到FullData列,这样当它们悬停时,就会获得完整的列数据。我会把BoundField
转换成TemplateField
,并这样填充:
<asp:templatefield>
<itemtemplate>
<asp:label id="lblData"
Text= '<%# Eval("TruncatedData") %>'
runat="server"
ToolTip='<%# Eval("FullData") %>' />
</itemtemplate>
</asp:templatefield>
你应该发布你尝试过的代码,这样人们就可以提出更改/改进等建议。无论如何,我必须写一个代码,按照你想要的行做一些事情,所以现在你有了。
private string[] truncateText(string iniText, int colNumber, int noAddRows)
{
string[] outStrings = new string[noAddRows + 3];
if (noAddRows == 0)
{
outStrings = new string[22];
}
outStrings[1] = iniText;
int addBit = 10;
int maxLength = (int)GridView1.Columns[colNumber].ItemStyle.Width.Value + addBit;
int linesCount = 1;
if (iniText.Length > maxLength)
{
outStrings[1] = iniText.Substring(0, maxLength); //New truncated string
outStrings[2] = iniText.Substring(maxLength, iniText.Length - maxLength); //Remaining bit
linesCount = 2;
if (noAddRows > -1 && outStrings[2].Length > maxLength)
{
//Further lines of the truncated bit
string remBit = outStrings[2].Substring(maxLength, outStrings[2].Length - maxLength);
outStrings[2] = outStrings[2].Substring(0, maxLength);
while (remBit.Length > 0)
{
linesCount = linesCount + 1;
if ((noAddRows > 0 && linesCount > noAddRows + 2) || linesCount > 20)
{
linesCount = linesCount - 1;
if (remBit.Length > 0)
{
outStrings[linesCount] = outStrings[linesCount] + remBit;
}
break;
}
if (remBit.Length <= maxLength)
{
outStrings[linesCount] = remBit;
break;
}
else
{
outStrings[linesCount] = remBit.Substring(0, maxLength);
remBit = remBit.Substring(maxLength, remBit.Length - maxLength);
}
}
}
}
outStrings[0] = Convert.ToString(linesCount); //Total number of lines
return outStrings;
}
你可以这样称呼它:
string[] truncatedLines = truncateText("text to truncate", colNo, noAdd);
输出string[]
保持所有被截断的行,使得它们适合于给定列的宽度+一个小比特(addBit
,我将其设置为10)。使用noAddRows
参数可以控制要作为输出的行数:如果将其设置为零,则会根据给定的列宽返回所需的行数。数组的0位置是为返回的总行数保留的。
我想您不会发现使用此代码来完全控制您想要实现的功能有任何问题。
相关文章:
- 基于比较c#中gridview的文本框值来启用或禁用按钮
- 正在获取Gridview中文本框的客户端ID
- 使用 javascript 更改 Gridview 文本框的可见属性 true 在下拉列表的选定索引更改事件上为 tru
- 如何在javascript函数中获取文本框(位于Gridview内部)的值
- 使用 JavaScript 在 GridView 中查找和验证文本框和下拉列表
- 如何使用 JavaScript 在 GridView 中获取文本框值
- 使用 jquery 为 gridview 文本框赋值
- 如何使用Javascript从Gridview中的文本框中获取文本值
- JQuery 最接近的元素,来自 GridView 中的文本框
- 如何调用GridView中的文本框
- 用于在gridview中插入文本框值的javascript
- 如何使用javascript将文本框值插入到gridview中
- 如何从javascript函数设置gridview文本框的值
- gridview c#中文本框的Javascript验证
- 如何在gridview中自动完成文本框
- 适合GridView列中的长文本
- 在另一个文本框中插入GridView文本框值
- 使用Javascript在GridView内设置值文本框
- 使用JavaScript获取GridView的列名或标题文本
- 更改asp.net中gridview内文本框的背景颜色