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()。

另一个编辑：

我刚发现This jsFiddle Demo比我能更好地描述了这个......

'selector'选项基本上允许您运行工具提示和 popovers使用jQuery的'on'功能，这意味着你可以允许使用正确的选择器动态添加HTML以触发弹出窗口如果它们存在于最初加载的DOM中。没有选择器选项，只会触发初始DOM中存在的元素提示;任何动态添加的都不会。

ASP.Net - Gridview中的Bootstrap Popover

1 个答案: