截断ASP.NET GridView中的文本但在悬停时显示工具提示预览?

时间:2011-04-19 13:47:36

标签: jquery asp.net gridview

在ASP.NET GridView中,是否可以截断显示的文本,但保留整个字符串,以便在悬停时可以在工具提示中显示?

我有一个代码隐藏函数,如下所示:

public static string TruncateString(string stringToTruncate, int length)
{
   return stringToTruncate.Length > length ?
      stringToTruncate.Substring(0, length) + "..." : 
      stringToTruncate;
}

切换到.aspx页面我在其上创建了一个GridView。这与从sproc的结果中填充的自定义对象的内容绑定。

出于此目的,我们假设该字段名为BigNVarCharField,关闭列的自动生成并且通常使用GridView标记。

<asp:BoundField DataField="BigNVarCharField" HeaderText="Big field preview" Visible="true">

我认为我应该可以做类似于使用DataFormatString属性的东西,但它似乎没有工作

DataFormatString = '<%#HelperFunctions.TruncateString(Convert.ToString(Eval("BigNVarCharField")))%>'

我不想在数据库或业务逻辑中截断它,因为我希望能够在悬停在相关列上的工具提示中显示它。

该网站已经在使用jQuery,以便在需要时可以用于工具提示。

编辑:2011-04-23最终如何成功

<asp:TemplateField HeaderText="Big field preview">
<EditItemTemplate>
    <asp:TextBox ID="txtBigNVarCharField" runat="server" Text='<%# Bind("BigNVarCharField") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
    <asp:Label ID="lblBigNVarCharField" runat="server" Text='<%# HelperFunctions.TruncateString(DataBinder.Eval(Container.DataItem,"BigNVarCharField").ToString(), 50)%>' ToolTip='<%#Eval("BigNVarCharField")%>'></asp:Label>
</ItemTemplate>

将乍得的一个标记为已接受的答案,因为这是正确引导我的方向。

2 个答案:

答案 0 :(得分:2)

将其转换为模板字段,然后插入标签文本。我可能会使用行数据绑定事件来处理逻辑,但您可以在标记中完成它。

DataFormatString适用于数字和日期,但不能满足您的要求。

答案 1 :(得分:1)

是的,将截断的文本放在表格单元格中。然后将完整版本放在同一单元格内的隐藏元素中。

<tr>
  <td>
    The quick brown fox...
    <span class="hidden">
      The quick brown fox jumps over the lazy dog
    </span>    
  </td>
</tr>

当您将鼠标悬停在单元格上时,使用CSS / jQuery获得所需的效果。

$('table').delegate('td:has(span)', 'mouseenter mouseleave', function() {

   //your code goes here.

});

我意识到我给了你一个不完整的解决方案。这实际上取决于您希望如何显示工具提示。只需要CSS和一些jQuery,查看这些链接即可完成它。