fancyboxjquery关于gridview的templete字段绑定问题

本文关键字:字段 绑定 问题 templete 关于 gridview fancyboxjquery | 更新日期: 2023-09-27 18:28:11

这里我在c#.net中创建了一个网站,我想要在单击fancybox中的gridview字段后打开的页面。但我面临的一个问题是,它打开了第一排fancybox中的页面,只是我不知道为什么。。?

这是我的代码:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="../fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="../fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="../fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="../fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="../fancybox/jquery.fancybox-1.3.4.css"
    media="screen" />
<script type="text/javascript" language="javascript">
    $(document).ready(function() {
            $('#deal_VCU').fancybox({
                'width': '85%',
                'height': '85%',
                'autoScale': false,
                'transitionIn': 'none',
                'transitionOut': 'none',
                'type': 'iframe',
                'titleShow': false
            });
        });
 </script>
<asp:GridView ID="GrdDeals" runat="server" AllowPaging="True" AllowSorting="True"
    AutoGenerateColumns="False" CellPadding="1" DataKeyNames="OFID" DataSourceID="SqlDataSource3"
    ForeColor="#333333" GridLines="None" PageSize="100" 
    onrowdatabound="GrdDeals_RowDataBound" onrowcommand="GrdDeals_RowCommand">
    <Columns>
        <asp:BoundField DataField="OFID" HeaderText="Offer ID" SortExpression="OFID" />
        <asp:BoundField DataField="Text_Message" HeaderText="Offer Text" SortExpression="Text_Message" />
        <asp:TemplateField HeaderText="Deal for VCU" SortExpression="Counter1">
            <ItemTemplate>
                <a id="deal_VCU" href="DetailView.aspx?ID=<%#Eval("OFID")%>&Op1=Counter2">
                    <%#Eval("Counter2")%></a>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Deal for SCSU" SortExpression="Counter2">
            <ItemTemplate>
                <a id="deal_SCSU" href="DetailView.aspx?ID=<%#Eval("OFID")%>&Op1=Counter2">
                    <%#Eval("Counter2")%></a>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Deal for Trinity" SortExpression="Counter3">
            <ItemTemplate>
                <a id="deal_Trinity" href="DetailView.aspx?ID=<%#Eval("OFID")%>&Op1=Counter3">
                    <%#Eval("Counter3")%></a>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <RowStyle BackColor="#EFF3FB" Height="4" />
    <EditRowStyle BackColor="#2461BF" />
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Right" />
    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <AlternatingRowStyle BackColor="White" />
</asp:GridView>

在这里,我面临的一个问题是,fancybox只在第一排开放。

fancyboxjquery关于gridview的templete字段绑定问题

这是因为存在多个具有相同ID的超链接控件。请分配一个css类(比如deal_VCUCSS

 <a id="deal_VCU" class="deal_VCUCSS" href="DetailView.aspx?ID=<%#Eval("OFID")%>&Op1=Counter2">
                                <%#Eval("Counter2")%></a>

并使用以下

 $('.deal_VCUCSS').fancybox({

为了让jQuery选择器工作,他们需要知道你引用的是什么元素,而且由于你的代码有错误(根据W3C,在html文件中应该只使用一次ID,以便DOM元素知道你想访问什么元素)。

您需要有一个类,就像前面的注释中一样,才能有事件侦听器。或者,如果您希望每个链接都有不同的ID,那么您可以循环并将事件侦听器应用于所有链接$("#main_div_container").find("a").each(function(){您的代码在这里;});我希望这能有所帮助。