一个简单的 DataGrid 行提示工具，适合初学者。

• 下载源代码 - 18.5 Kb

引言

有很多关于提示工具的例子和文章，但我没有找到任何可以动态显示数据库表中内容的例子。 我阅读了不同的文章，最后使用了以下方法，我想与大家分享。

本文介绍如何使用 JavaScript 在 ASP.NET 中创建动态提示工具。 在这里，我们可以根据自己的意愿设计提示工具的外观，它不像传统的 Windows 提示工具。 如果我们愿意，我们也可以在提示工具中插入图像。 提示工具的外观可以根据需求进行更改。 本文包含非常简单的 JavaScript 和 ASP.NET 代码。

实现

我将尝试使用一个例子来解释这篇文章。 让我们以一个包含以下字段的数据库表为例

• Client_Id (客户ID)
• Client_Name (客户名称)
• 地址
• 城市
• 状态
• 电话
• 传真
• 状态

在这里，我们将这个表绑定到 DataGrid，并且我们只显示几个字段（Client_id、Client_Name 和客户的 Status）。 现在，我们的要求是当用户将鼠标悬停在 DataGrid 的特定行上时，我们需要使用提示工具显示客户的 Client_name、Address（地址）、city（城市）、state（州）、Phone（电话）和 Fax（传真）。

首先，我们将设计我们的提示工具。 如果我们使用 DIV 标签会更好，这样我们就可以在文档中的任何位置移动这个标签，并且在需要时，我们可以在 mouseout 事件中隐藏它。 在 DIV 标签中，我在这里使用了一个表格，并且使用 JavaScript 在 mouseover 事件中动态填充表格的每个单元格。

<div id="Popup" class="transparent">
  <div style="background-color: #003366"><b><center>
                 <span>Address</span></center></b></div>
   <div>
   <table width=100% border=0 cellpadding=0 cellspacing=0>
    <tr>
     <td id=td0 align=left class=runtext1></td>
    </tr>
    <tr>
     <td id=td1 align=left class=runtext></td>
    </tr>
    <tr>
     <td id=td2 align=left class=runtext></td>
    </tr>
    <tr>
     <td id=td3 align=left class=runtext></td>
    </tr>
    <tr>
     <td id=td4 align=left class=runtext></td>
    </tr>
    <tr>
     <td id=td5 align=left class=runtext></td>
    </tr>
   </table>
   
   </div>
 </div>

在这里，对于表格的每个单元格，我们将使用表格单元格的 innerText 属性动态填充文本。 这我们将在我们的 JavaScript 函数中看到。

下一步是编写 JavaScript 函数，该函数将动态填充表格单元格。

<script language=javascript>
function ShowTooltip(name,address,city,state,phone1,fax)
{
    document.getElementById("td0").innerText=name; 
    document.getElementById("td1").innerText=address;
    document.getElementById("td2").innerText=city;
    document.getElementById("td3").innerText=state;
    document.getElementById("td4").innerText=phone1;
    document.getElementById("td5").innerText=fax;
    x = event.clientX + document.body.scrollLeft;
    y = event.clientY + document.body.scrollTop + 10;
    Popup.style.display="block";
    Popup.style.le ft = x;
    Popup.style.top = y;
 }

function HideTooltip()
{
    Popup.style.display="none";
}
</script>

在这里，在 ShowTooltip 函数中，我们获得了 6 个参数并将这些值设置到表格的单元格中。 之后，我们获取当前的鼠标位置 x-y 坐标，并在所需位置显示提示工具。 我认为隐藏函数是可以理解的； 它在 DataGrid 行的 mouseout 事件中触发。

现在，我们最终也是最重要的任务是在 DataGrid 绑定时，将数据库表中的值传递给 JavaScript 函数，并将 mouseover 和 mouseout 事件添加到每个 DataGrid 行。 为此，我们将使用 DataGrid 的 ItemDataBound 事件，该事件发生在项目数据绑定到 DataGrid 控件之后。 此事件为我们提供了在数据项显示在客户端之前访问数据项的最后机会。 引发此事件后，数据项将设置为 null 并且不再可用。

//[C#]

void dgClient_ItemDataBound(object sender, 
             DataGridItemEventArgs e)
{
  if (e.Item.DataItem != null)
  {
    e.Item.Attributes.Add("onmouseover", "ShowTooltip('" + 
      DataBinder.Eval(e.Item.DataItem, "client_name").ToString() + "','" + 
      DataBinder.Eval(e.Item.DataItem, "Address").ToString() + "','" + 
      DataBinder.Eval(e.Item.DataItem, "CITY").ToString() + "','" + 
      DataBinder.Eval(e.Item.DataItem, "STATE").ToString() + "', '" + 
      DataBinder.Eval(e.Item.DataItem, "PHONE1").ToString() + "','" + 
      DataBinder.Eval(e.Item.DataItem, "FAX").ToString() + 
      "');"); 
   e.Item.Attributes.Add("onmouseout","HideTooltip();");
  }
}

结论

我也是 ASP.NET 的新手，可能还有更好的方法来做到这一点。 如果您有任何建议或意见，请告诉我，这将真正帮助我提高自己。 我希望这个简单的例子不需要其余的代码，我也不想浪费宝贵的 CP 空间。 如果需要完整的代码，请告诉我，我会发送代码。