ASP.Net - Gridview中的Bootstrap Popover

Question

我試過在bootstrap論壇上提交這個，但沒有得到任何迴應。就javascript而言，我是綠色的。我想要在gridview中單擊或鼠標懸停顯示數據單元格中的彈出窗口。我正在使用的gridview包裝在更新面板中，我認爲這可能是我的問題的一部分。

有沒有人有一個例子，如何做到這一點偶然？

我的問題是，我可以得到它的工作似乎前10條記錄（分頁是一次，並顯示10）。但是，當我進入任何頁面後，它似乎並沒有工作。我想知道是否與updatepanel有關，但我不確定。

任何人做了這個或有一個偶然的例子，我可以按照讓這個工作？

感謝您的幫助。

代碼：

<asp:Panel ID="pnlRefenceList" GroupingText='Reference &nbsp;&nbsp;&nbsp;&nbsp; ' runat="server"> 

         <asp:GridView ID="gvwIllustration" runat="server" CssClass="table table-hover" AutoGenerateColumns="false" PagerStyle-CssClass="pgr" AllowPaging="True" OnPageIndexChanging="gvwIllustration_PageIndexChanging" OnRowDataBound="gvwIllustration_RowDataBound" DataKeyNames="REFERENCE_ID,PART_ID"> 
          <Columns> 
           <asp:BoundField DataField="REFERENCE_ID" HeaderText="ID" SortExpression="REFERENCE_ID" Visible="false" /> 
            <asp:TemplateField AccessibleHeaderText="Title" HeaderText="Reference Number" SortExpression="REFERENCE_ID"> 
             <ItemTemplate> 
              <asp:HyperLink ID="hypName" runat="server" NavigateUrl="" Text='<%# Eval("REF_NUMBER") %>'></asp:HyperLink> 
             </ItemTemplate> 
            </asp:TemplateField> 
           <asp:BoundField DataField="REF_SEQ_NUMBER" HeaderText="Sequence #" SortExpression="REF_SEQ_NUMBER" Visible="TRUE" /> 

           <asp:TemplateField AccessibleHeaderText="Title" HeaderText="Part Number" SortExpression="PART_ID"> 
             <ItemTemplate> 
              <asp:HyperLink ID="hypName" runat="server" NavigateUrl="" Text='<%# Eval("PART_NUMBER") %>'></asp:HyperLink> 
             </ItemTemplate> 
            </asp:TemplateField> 
           <asp:BoundField DataField="REF_DESC" HeaderText="Description" SortExpression="REF_DESC" Visible="TRUE" /> 
           <asp:BoundField DataField="LINK_COUNT" HeaderText="Link Count" SortExpression="LINK_COUNT" Visible="TRUE" /> 
           <asp:BoundField DataField="REMARKS" HeaderText="Remarks" SortExpression="REMARKS" Visible="TRUE" /> 
           <asp:BoundField DataField="DISPOSITION" HeaderText="Disposition" SortExpression="DISPOSITION" Visible="TRUE" /> 
           <asp:BoundField DataField="QTY" HeaderText="Quantity" SortExpression="QTY" Visible="TRUE" /> 
           <%--<asp:BoundField DataField="HAS_SERIALS" HeaderText="Has Serials" SortExpression="HAS_SERIALS" Visible="TRUE" />--%> 

           <asp:TemplateField AccessibleHeaderText="Title" HeaderText="Has Serials" SortExpression="HAS_SERIALS"> 
             <ItemTemplate> 
              <a href="#" class="IllustrationGridLink" rel="popover" data-original-title='This is title ao' data-content='junk - data content'><%# Eval("HAS_SERIALS") %></a> 

              <div id="popover_content_wrapper" style="display: none">This is your div content</div> 
    </div> 



              <%--<%# Eval("YourDataContent")%>--%> 
              <%--<asp:HyperLink ID="hypHasSerials" runat="server" NavigateUrl="" Text='<%# Eval("HAS_SERIALS") %>' data-original-title='This is your title ' data-content='junk - data content'>></asp:HyperLink>--%> 
             </ItemTemplate> 
            </asp:TemplateField> 

           <asp:BoundField DataField="ACTIVE_DATE" dataformatstring="{0:MM/dd/yyyy}" HeaderText="Active Date" SortExpression="ACTIVE_DATE" Visible="TRUE" /> 
           <asp:BoundField DataField="INACTIVE_DATE" dataformatstring="{0:MM/dd/yyyy}" HeaderText="Inactive Date" SortExpression="INACTIVE_DATE" Visible="TRUE" /> 
          </Columns> 
         </asp:GridView> 

        </asp:Panel> 

       </div> 
      </div> 
     </div> 

     <script type="text/javascript"> 
      $(function() { 


       $('[rel=popover]').popover({ 
        html: true, 
        content: function() { 
         return $('#popover_content_wrapper').html(); 
        } 

       }); 

      }); 

     </script> 

    </ContentTemplate> 
    <Triggers> 

    </Triggers> 
</asp:UpdatePanel> 

Answer 1

可以提供一個事件代表團目標選擇指向這可能會或可能不會使用selector選項存在的元素。

$('body').popover({ 
    html: true, 
    content: function() { 
     return $(this).next().text(); 
    }, 
    selector: '.has-popover' 
}); 

編輯：

看到這個jsFiddle Demo也許這會更有意義。請注意，在添加新行時，它仍然會彈出，因爲我添加了selector: '.has-popover'選項集。無論何時創建該元素，這都會爲包含.has-popover類的元素添加彈出窗口。

您可以通過動態加載content選項來添加自定義內容，如上圖和我的演示中所示。基本上，這是做的是採取當前元素，彈出正在創建$(this)然後遍歷到「下一個」元素.next()然後抓住它的文本.text()。

ANOTHER編輯：

我剛剛發現This jsFiddle Demo描述該比我好的....

的「選擇」選項基本上可以讓你使用jQuery的「上運行工具提示和 popovers '功能，這意味着如果 存在於原始加載的DOM中，則可以允許 動態添加帶有正確選擇器的HTML，以便將彈出框觸發爲 。如果沒有 選擇器選項，則只有存在於初始DOM中的元素纔會觸發 工具提示;任何動態添加的都不會。