0

我在 ASP.NET gridview 列中显示长文本时遇到问题。我不希望文本换行到第二行，因为这是不换行的业务要求之一。

理想情况下，我想要某种基于服务器或客户端的代码，它可以帮助我将文本截断为列的大小，然后可能显示更多按钮或“...”以获得更多文本？

当点击更多按钮或...时；将出现一个弹出窗口，其中包含其余文本或全文。

注意：文本或字符串大小各不相同，可以是 25 到 75 个字符之间的任意长度。

关于我应该如何实现上述目标的任何想法？谢谢

4

3 回答 3

5

将此 CSS 类用于 gridview 列

.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;
}
于 2013-07-16T17:18:28.997 回答
0

您应该发布您尝试过的代码，以便人们可以提出更改/改进等。无论如何，我必须编写一个代码来按照您正在寻找的内容做一些事情，所以这里有它。

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 位置是为返回的总行数保留的。

我想您不会发现使用此代码完全控制要实现的功能有任何问题。

于 2013-07-16T15:57:06.677 回答
0

如果您担心格式，我会构建我的查询（您将 GridView 绑定到的查询），以便以两种形式返回数据。

Select Left(dataColumn, 20) as TruncatedData, dataColumn as FullData From table

然后，您可以将 GridView 绑定到 TruncatedData 列，并将工具提示绑定到 FullData 列，以便在悬停时获得完整的列数据。我将 a 转换BoundField为 aTemplateField并填充它：

          <asp:templatefield>
              <itemtemplate>
                  <asp:label id="lblData"
                      Text= '<%# Eval("TruncatedData") %>'
                      runat="server"
                      ToolTip='<%# Eval("FullData") %>' /> 
              </itemtemplate>
          </asp:templatefield>
于 2013-07-16T15:52:19.160 回答