在gridview的模板字段中打開gridview

Question

我在gridview的模板字段中有圖像按鈕。我想打開另一個gridview下面的加號按鈕被點擊的行，但我的問題是，內部gridview作爲父網格視圖的列打開，而不是在選定的行下面打開。我嘗試過各種設計方法，但仍然無法使用。我正在使用Jquery打開圖像按鈕單擊的子網格視圖。以下是我的網格和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

我曾經在我之前的一個項目中使用過這個。從我的項目中提供代碼示例。只需根據您的需要進行修改即可。隨意問的問題。

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