2014-09-25 55 views
0

我知道我的问题有很多解决方案。但我想在我的代码中做一些不同的事情。 我想要做的是,当我点击加号然后该行应该隐藏。并且对应的子表将会可见。这对我有用。现在的问题是,当我的孩子行折叠,然后相应的行应该是可见的。 这里是我的jQuery嵌套的GridView(嵌套的GridView worksfine)在asp.net中嵌套gridview的jquery

$("[src*=plus]").live("click", function() { 


     $(this).closest("tr").after("<tr><td><img src='../Images/gvminus.png'> </img></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>"); 
     //$(this).attr("src", "../Images/gvminus.png"); 
     $(this).closest("tr").andSelf().css('display', 'none'); 

    }); 
    $("[src*=minus]").live("click", function() { 

     $(this).closest("tr").andSelf().remove(); 
     $(this).closest("tr").prev().css('display',''); 
    }); 

,并在这里家长和孩子网格是如下

<asp:GridView ID="gvParent" runat="server" AutoGenerateColumns="false" DataKeyNames="ID" 
     OnRowDataBound="gvParent_OnRowDataBound" Width="100%"> 
     <Columns> 
      <asp:TemplateField> 
       <ItemTemplate> 
        <img alt="" style="cursor: pointer" src="../Images/gvplus.png" /> 
        <asp:Panel ID="pnlChild" runat="server" Style="display: none;"> 
         <asp:GridView ID="gvChild" runat="server" AutoGenerateColumns="false" BorderStyle="Double" 
          BorderColor="#df5015" GridLines="None" Width="100%"> 
          <HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" /> 
          <RowStyle BackColor="#E1E1E1" /> 
          <AlternatingRowStyle BackColor="White" /> 
          <HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" /> 
          <Columns> 
           <asp:BoundField DataField="ID" HeaderText="ID" HeaderStyle-HorizontalAlign="Left" /> 
           <asp:BoundField DataField="Child" HeaderText="ChildValue" HeaderStyle-HorizontalAlign="Left" /> 
          </Columns> 
         </asp:GridView> 
        </asp:Panel> 
       </ItemTemplate> 
      </asp:TemplateField> 
      <asp:BoundField DataField="Catagory" HeaderText="Catagory" /> 
     </Columns> 
    </asp:GridView> 
+0

而不是使用最接近添加一个id为每一行的。然后用它找到正确的行 – Sam 2014-09-25 07:04:54

+0

Sam我已经用gridview更新了我的代码。所以你能告诉我如何设置id到每一行? – mmj89 2014-09-25 07:09:40

回答

0

试试这个:

<script type="text/javascript"> 
    $("[src*=plus]").live("click", function() { 
     $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>") 
     $(this).attr("src", "/Content/img/minus.gif"); 
    }); 
    $("[src*=minus]").live("click", function() { 
     $(this).attr("src", "/Content/img/plus.gif"); 
     $(this).closest("tr").next().remove(); 
    }); 

... 
<asp:TemplateField ItemStyle-CssClass="templateField-Plus"> 
    <ItemTemplate> 
     <img alt="" style="cursor: pointer" src="/Content/img/plus.gif" /> 

... 

一个真实的例子是here

它很适合我,希望这将是同样的话)

0
function GridViewDesign() { 
    var i = 0 
    $(".Test").each(function() { 
     if ($(this)[0].innerHTML.indexOf("Hide") != -1) { 
      $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $('#cphContent_gvSchMaint_pnlSchedule_' + i)[0].innerHTML + "</td></tr>"); 
      $('#cphContent_gvSchMaint_pnlSchedule_' + i)[0].innerHTML = ""; 
     } 
     i = i + 1; 
    }); 
} 


<asp:TemplateField AccessibleHeaderText="ShowHide"> 
    <HeaderTemplate> 
    </HeaderTemplate> 
    <ItemTemplate> 
     <div class="topdarkcommon dark drow" id="flex"> 
      <div class="whitetext"> 
       <asp:LinkButton ID="lnkShowHide" runat="server" CommandName="Show" CssClass="Test"></asp:LinkButton> 
      </div> 
     </div> 
    </ItemTemplate> 
    <ItemStyle Width="50px" Height="42px" /> 
</asp:TemplateField> 
<asp:TemplateField AccessibleHeaderText="UpcomingPanel"> 
    <HeaderTemplate> 
    </HeaderTemplate> 
    <ItemTemplate> 
     <asp:Panel ID="pnlSchedule" runat="server" Style="position: relative"> 
      <asp:GridView ID="gvUpCommingSchedule" runat="server" Width="100%" CssClass="ChildGrid" AutoGenerateColumns="False" 
       BorderColor="Black"> 
       <Columns> 
        <asp:BoundField DataField="UpComingDate" meta:resourcekey="BoundFieldResource1"> 
         <ItemStyle Width="20%" /> 
        </asp:BoundField> 
        <asp:BoundField DataField="SchTask" meta:resourcekey="BoundFieldResource2"> 
         <ItemStyle Width="55%" /> 
        </asp:BoundField> 
        <asp:BoundField DataField="ResponsiblePersonName" meta:resourcekey="BoundFieldResource3"> 
         <ItemStyle Width="25%" /> 
        </asp:BoundField> 
       </Columns> 
      </asp:GridView> 
     </asp:Panel> 
    </ItemTemplate> 
    <ItemStyle CssClass="testClass" /> 
    <HeaderStyle CssClass="testClass" /> 
</asp:TemplateField>