在 GridView 中使用 jQuery Tooltip 插件

• 下载源代码 - 354 KB

引言

您希望当鼠标悬停在 GridView 中的字段上时，弹出一个小窗口来显示其他信息。 下面的示例展示了当鼠标悬停在链接上时，有关各自相关表（外键）的信息。

解决方案

很简单。 我们可以使用 jQuery tooltip 插件来显示其他信息。 我们将要使用的 jQuery tooltip 插件可以在这里找到。 当然，您还需要 jQuery 框架，可以在这里找到。 所有需要的脚本都已包含在下面的“代码下载”中。

小细节：此示例使用（Microsoft） Northwind 数据库的 Product 表。 GridView Web 控件通过 ObjectDataSource Web 控件获取数据。 ObjectDataSource 通过强类型中间层对象获取数据 (SelectMethod)，该对象封装了一个数据层对象，该对象调用存储过程。 您不必使用 ObjectDataSource 控件来检索数据源中的项目，您也可以使用 SQLDataSource 等。

1. 加载 jQuery 框架和 jQuery tooltip 插件。 还要加载 tooltip 使用的样式表。 注意：以下代码显示我们正在加载 JavaScript 文件。

<link rel="stylesheet" type="text/css" href="Styles/jquery.tooltip.css" />
<script src="Scripts/gridview-readonly-script.js" type="text/javascript"></script>

在 JavaScript 文件中，正在加载两个脚本

loadJavaScriptFile("Scripts/jquery-1.4.1.min.js");
loadJavaScriptFile("Scripts/jquery.tooltip.min.js"); 

function loadJavaScriptFile(jspath) {    
    document.write('<script type="text/javascript" src="' + 
                   jspath + '"><\/script>');
}

2. 初始化 jQuery UI Tooltip 插件。

$(function () {
    InitializeToolTip();
});

function InitializeToolTip() {    
   $(".gridViewToolTip").tooltip({        
      track: true,        
      delay: 0,        
      showURL: false,        
      fade: 100,        
      bodyHandler: function () {            
         return $($(this).next().html());        
      },        showURL: false    
    });
}

3. 我们需要一种方法来在每次回发时重新初始化 tooltip，例如，当用户单击其中一个分页号码或对 GridView 进行排序时。 这是因为 tooltip 将在回发时停止工作。 为此，我们需要在页面加载时调用上面看到的初始化函数。 请参阅下面的代码。

function pageLoad(sender, args) {    
   if (args.get_isPartialLoad()) {        
      InitializeToolTip();    
   }
}

4. 在 GridView 中添加一个 TemplateField。 在模板字段中，添加一个类名为“tag”的 div 标记。 还要添加一个锚标记，这将是我们悬停的链接。

<asp:TemplateField HeaderText="Category ID" 
     SortExpression="CategoryID" HeaderStyle-Wrap="false">
  <ItemStyle Width="30px" HorizontalAlign="Center" />    
    <ItemTemplate>
      <div class="tag">
        <a href="#" class="gridViewToolTip"><%# Eval("CategoryID")%></a>
        <div id="tooltip" style="display: none;">
          <table>
            <tr>
               <td style="white-space: nowrap;"><b>Category ID:</b> </td>
               <td><%# Eval("Categories.Value.CategoryID")%></td>
            </tr>
            <tr>
               <td style="white-space: nowrap;"><b>Category Name:</b> </td>
               <td><%# Eval("Categories.Value.CategoryName")%></td>
            </tr>
            <tr>
                <td style="white-space: nowrap;"><b>Description:</b> </td>
                <td><%# Eval("Categories.Value.Description")%></td>
            </tr>
          </table>
        </div>
      </div>
   </ItemTemplate>
</asp:TemplateField>

您会注意到，用于锚标记的类名 (class="gridViewToolTip") 是我们在初始化期间引用的类名。 关键在于这里。 只要您将鼠标放在链接上，此锚标记下方的 div 标记就会显示。 就是这样。

最后的话

要运行代码下载，请务必下载并安装 Microsoft 的 Northwind 数据库。 还要确保更改 App_Code 文件夹下的 Helper 文件夹中的 Dbase.cs (Dbase.vb) 类文件上的用户名和密码。 下载的代码是由 AspxFormsGen 4.0 生成的 Web 窗体的修改版本。

原始文章可以在这里找到。

演示

点击这里查看演示.

一如既往，代码和文章按“原样”提供，绝对没有任何保证。请自行承担使用风险。

编码愉快！！！