使用動態數據在gridview上顯示qtip/toolip

我想顯示qtip或任何其他方式顯示數據庫中數據的asp.net gridview上的工具提示。使用動態數據在gridview上顯示qtip/toolip

我有qtip與標題上的頁面上的按鈕一起工作，我不知道如何將它懸停在gridview上的每個單元格（這裏是我的代碼按鈕）。

$('input[title]').qtip({ 
       content: { 
       }, 
       position: { 
        corner: { 
         target: 'bottomRight', 
         tooltip: 'topLeft' 
        } 
       }, 
       style: { 
        name: 'cream', 
        padding: '7px 13px', 
        width: { 
         max: 210, 
         min: 0 
        }, 
        tip: true, 
        'color': '#666666' 
       } 
      });

也不知道如何從qtip中的代碼後面調用函數並將我的行ID傳遞給它。

網格是一個正常的網格，數據綁定列，如下圖所示：

<asp:GridView ID="gvmygrid" runat="server" AllowPaging="false" AllowSorting="true" 
          AutoGenerateColumns="false" GridLines="None"> 
          <Columns> 
           <asp:BoundField DataField="firstColumn" HeaderText="Col1" ReadOnly="true" /> 
           <asp:BoundField DataField="Type" HeaderText="Type" ReadOnly="true" /> 
</Columns> 
</asp:GridView>

來源

2012-12-13 Zaki

1）您需要的工具提示中顯示，並給它網格視圖的列（S）創建模板項目一個ID，所以它可以從JavaScript引用。

2）我不知道你打算如何從數據庫獲取數據，所以我實現了一個簡單的jQuery Web服務調用，它通過用戶懸停的單元的id並返回測試從WS數據呼叫

ASPX：

<head runat="server"> 
    <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script> 
    <script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("table[id*=gvCustomers] span[id*=nationality]").tooltip({ 
       delay: 0, 
       offset: [-65, -110], 
       position: 'center top', 
       bodyHandler: function() { 
        var id = $(this).closest("tr").find("span[id*=nationality]").text(); 
        $.ajax({ 
         type: "POST", 
         dataType: "text", 
         url: "CustomerService.asmx/GetNationality", 
         data: { nationalityId: id }, 
         success: function (msg) { 
          $("#tool").html(msg); 
         }, 
         error: function (err) { 
          alert("Web service call failed"); 
         } 
        }); 
        return $("<span id='tool' style='width:200px;background-color:black;color:white;' />"); 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="False" DataSourceID="customersDS"> 
      <Columns> 
      <asp:BoundField DataField="Name" HeaderText="Customer Name" /> 
       <asp:TemplateField> 
        <ItemTemplate> 
         <asp:Label runat="server" ID="nationality" Text='<%# Bind("NationalityId") %>' /> 
        </ItemTemplate> 
       </asp:TemplateField> 
      </Columns> 
     </asp:GridView> 
     <asp:SqlDataSource ID="customersDS" runat="server" ConnectionString="<%$ ConnectionStrings:connection %>" 
      SelectCommand="SELECT [NationalityId], [Name] FROM [Customers]"></asp:SqlDataSource> 
    </form> 
</body>

ASMX：

public class CustomerService : System.Web.Services.WebService 
{ 
    [WebMethod] 
    public string GetNationality(int nationalityId) 
    { 
     return nationalityId == 1 ? "Nationality1" : "Nationality2"; 
    } 
}

篇

下面的文章也可能會有所幫助：

jQuery tooltip with Ajax tooltip datasource with gridview

Using The JQuery Tooltip Plugin in a GridView

來源

2012-12-13 21:28:29