當點擊鏈接時在GridView中動態顯示文本

Question

我有一個gridview設置，我想要它，這樣當一個項目（鏈接）被點擊時，將顯示對應於該項目記錄的隱藏字段。這看起來像JQuery可以處理的東西，但我不知道如何實現它。

我正在尋找的東西沿線：房主列表是從SQL數據庫拉入到Gridview。如果您點擊某個特定的名稱，則會顯示房主的地址。

我在.NET中這樣做。任何幫助將不勝感激。

Answer 1

你提到.Net和GridView所以我打算假設你的意思是一個Web應用程序。

GridView允許您發揮創意。如果您熟悉模板字段，那麼想象並解決與名稱關聯的「卡片」，或者在這種情況下，以及圖標。

在我的世界中的類rs-icon和rs-icon-vcard顯示與AA隱藏的div相關的關係網的時尚偶像形象：<div id="ContactInfo" class="Hide">

類tooltip-marker是僅用於識別隱藏的父匿名CSS類ContactInfo div via jquery

頁面呈現後，在jquery ready（）函數中，我對jqueryui的tooltip（）進行jquery調用。將鼠標懸停在圖標會觸發顯示隱藏的，格式化的「名片」，彈出提示：

$(function() { 
    $(document).tooltip({ 
    items: ".tooltip-marker", 
    content: function() { 
     return $(this).children("div").html() 
    }, 
    position: { 
     my: "left top", 
     at: "right+5 top-5" 
    } 
    }); 
}); 

這是GridView中的一個片段。我只使用了一個數據源，這個數據源在許多其他領域中提供了您在此看到的聯繫信息。缺點是無論用戶需求如何，都會提供所有信息（儘管隱藏）。對於我的需求，因爲我一次只顯示10行，所以開銷是可以接受的。

<asp:TemplateField HeaderText="Info"> 
    <HeaderStyle Width="32px" HorizontalAlign="Center" /> 
    <ItemStyle HorizontalAlign="Center" Width="50px" /> 
    <ItemTemplate> 
    <div class="rs-icon rs-icon-vcard tooltip-marker"> 
     <div id="ContactInfo" class="Hide"> 
     <table id="tblContactDetail" class="ContactDetail"> 
      <tr> 
      <td style="width: 80px">Name</td> 
      <td style="width: 100%"> 
       <asp:Literal ID="Literal1" runat="server" Text='<%# Eval("expert_name") %>' /> 
      </td> 
      </tr> 
      <tr> 
      <td>Address</td> 
      <td> 
       <asp:Literal ID="Literal2" runat="server" Text='<%# Eval("Address_1") %>'></asp:Literal> 
       <asp:Literal ID="Literal3" runat="server" Text='<%# Eval("Address_2") %>'></asp:Literal> 
       <asp:Literal ID="Literal4" runat="server" Text='<%# Eval("Address_3") %>'></asp:Literal> 
       <asp:Literal ID="Literal5" runat="server" Text='<%# Eval("csz") %>'></asp:Literal> 
      </td> 
      </tr> 
      <tr> 
      <td>Phone</td> 
      <td><asp:Literal ID="Literal6" runat="server" Text='<%# Eval("Phone_Number") %>'></asp:Literal></td> 
      </tr> 
      <tr> 
      <td>Email</td> 
      <td> 
       <asp:Literal ID="Literal7" runat="server" Text='<%# Eval("Email_Address") %>'></asp:Literal> 
      </td> 
      </tr> 
     </table> 
     </div> 
    </div> 
    </ItemTemplate> 
</asp:TemplateField>