Question

我在gridview的模板字段中有图像按钮。我想在单击加号按钮的行下面打开另一个网格视图但我的问题是内部网格视图打开为父网格视图的列而不是在所选行下面打开。我尝试了各种设计方法，但仍然没有工作。我正在使用Jquery在图像按钮单击上打开子gridview。下面是我的网格设计和Jquery的代码。

<div class="gridContentholder">
    <asp:GridView ID="grdsamplestock" runat="server" AlternatingRowStyle-CssClass="alt"
                AutoGenerateColumns="False" CssClass="styleGrid" GridLines="None" OnSelectedIndexChanged="grdsamplestock_SelectedIndexChanged"
                OnRowDataBound="grdsamplestock_RowDataBound" OnRowCreated="grdsamplestock_RowCreated">
          <AlternatingRowStyle CssClass="alt" />
          <Columns>
               <asp:TemplateField>
                   <ItemTemplate>
                     <asp:HiddenField ID="hdnSampleStockMasterID" runat="server" Value='<%#Eval("SampleStockMasterID") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField HeaderText="DoctorName" DataField="DoctorName" />
                    <asp:BoundField HeaderText="Comments" DataField="Comments" />
                    <asp:BoundField HeaderText="TotalSampleStockQuantity" DataField="TotalSampleStockQuantity" />
                    <asp:BoundField HeaderText="SampleDate" DataField="SampleDate" SortExpression="SampleDate"
                        DataFormatString="{0:dd/MM/yyyy}" HtmlEncode="false" NullDisplayText="N/A" />
                    <asp:TemplateField>
                       <ItemTemplate>
                            <a href="javascript:expandcollapse('div<%# Eval("SampleStockMasterID") %>', 'one');">
                                <img id="imgdiv<%# Eval("SampleStockMasterID") %>" alt="Click to show/hide Orders for Customer <%# Eval("SampleStockMasterID") %>"
                                    width="9px" border="0" src="../Images/plus.gif" />
                            </a>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <%--<asp:Panel ID="pnlInnerGrid" runat="server" >--%>
                            <tr style="display: none;" id="div<%# Eval("SampleStockMasterID") %>">
                                <td colspan="5">

                                    <asp:GridView ID="grdItems" CssClass="styleGrid" PagerStyle-CssClass="pgr" runat="server"
                                        AutoGenerateColumns="false" GridLines="None" OnRowCreated="grdItems_RowCreated"
                                        AlternatingRowStyle-CssClass="alt" >
                                        <AlternatingRowStyle CssClass="alt"></AlternatingRowStyle>
                                        <Columns>
                                            <asp:BoundField HeaderText="Reference No" DataField="ReferenceNo" />
                                            <asp:BoundField DataField="ProductName" HeaderText="Product" SortExpression="ProductName" />
                                            <asp:BoundField DataField="Specification" HeaderText="Specification" SortExpression="Specification" />
                                            <%--  <asp:BoundField DataField="StoreKeeparID" HeaderText="StoreKeeparID" SortExpression="StoreKeeparID" />--%>
                                            <%--<asp:BoundField DataField="Name" HeaderText="StoreKeeper Name" SortExpression="Name" />--%>
                                            <asp:BoundField DataField="WarehouseName" HeaderText="Warehouse" SortExpression="WarehouseNmae" />
                                            <asp:BoundField HeaderText="Expiry Date" DataField="ExpiryDate" DataFormatString="{0:d}"
                                                HtmlEncode="false" />
                                            <asp:BoundField HeaderText="Lot No" DataField="LotNo" />
                                            <asp:TemplateField>
                                                <ItemTemplate>
                                                    <asp:HiddenField ID="SampleStockTrsID" runat="server" Value='<%# Eval("SampleStockTrsID") %>' />
                                                </ItemTemplate>
                                            </asp:TemplateField>
                                        </Columns>
                                    </asp:GridView>

                                </td>
                            </tr>
                            <%--   </asp:Panel>--%>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
   </div>

// Jquery的代码。

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        //            var=$('div[id^="player_"]')

    });
    function expandcollapse(obj, row) {
        var div = document.getElementById(obj);
        var img = document.getElementById('img' + obj);
        if (div.style.display == "none") {
            div.style.display = "";
            $(div).hide().show(1000);
            if (row == 'alt') {
                img.src = "../Images/minus.gif";
            }
            else {
                img.src = "../Images/minus.gif";
            }
            img.alt = "Close to view other Sample Transaction";
        }
        else {
            $(div).hide(1000, function () {
                div.style.display = "none";
            });
            if (row == 'alt') {
                img.src = "../Images/plus.gif";
            }
            else {
                img.src = "../Images/plus.gif";
            }
            img.alt = "Expand to show Available Stock";
        }
    } 
</script>

Answer 1

我曾在之前的一个项目中使用过这个。从我的项目中提供exect代码示例。只需根据您的需要进行修改即可。随时提问。

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound">
    <Columns> 
        <asp:TemplateField>
            <ItemStyle BackColor="#C2D88B" Width="250px" />
            <ItemTemplate>
                <div>
                    //Draw your table here by placing a html table
                </div>
                <div>
                    <p>
                        <asp:ListView ID="ListView1" runat="server">
                            <ItemTemplate>
                                <asp:Label ID="Label1" runat="server" Text='<%# Eval("item_id") %>'></asp:Label>
                                <asp:Label ID="Label2" runat="server" Text='<%# Eval("quantity") %>'></asp:Label>
                            </ItemTemplate>
                            <ItemSeparatorTemplate>
                            <br />                                        
                            </ItemSeparatorTemplate>
                        </asp:ListView>
                    </p>
                </div>
            </ItemTemplate>
        </asp:TemplateField>                 
    </Columns>
</asp:GridView>

在gridview的模板字段内打开gridview

1 个答案: