1

我尝试在引导程序论坛上提交此内容，但没有得到任何回复。就 javascript 而言，我是绿色的。我希望在 gridview 中单击或鼠标悬停数据单元格时显示一个弹出框。我正在使用的 gridview 包含在一个更新面板中，我认为这可能是我的问题的一部分。

有没有人有一个如何偶然做到这一点的例子？

我的问题是前 10 条记录（分页打开，一次显示 10 条）数据我可以让它看起来工作。但是，当我之后转到任何页面时，它似乎不起作用。我想知道是否与更新面板有关，但我不确定。

有人这样做过，或者有一个我可以遵循的例子来让它工作吗？

谢谢您的帮助。

代码：

 <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>
4

1 回答 1

3

您可以使用该选项提供指向可能存在或不存在的元素的事件委托目标选择器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 .text()。

另一个编辑：

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

'selector' 选项本质上允许您使用 jQuery 的 'on' 函数运行工具提示和弹出窗口，这意味着您可以允许使用正确的选择器动态添加 HTML 来触发弹出窗口，就好像它们存在于最初加载的 DOM 中一样。如果没有选择器选项，只有初始 DOM 中存在的元素才会触发工具提示；任何动态添加的都不会。

于 2013-07-18T15:24:38.067 回答