具体效果如下:
JS代码,用于显示 隐藏嵌套的GRIDVIEW:
/* 隐藏嵌套的Gridview */ function ShowHidden(sid, ev) { ev = ev || window.event; var target = ev.target || ev.srcElement; var oDiv = document.getElementById( " div " + sid); oDiv.style.display = oDiv.style.display == " none " ? " block " : " none " ; target.innerHTML = oDiv.style.display == " none " ? " 展开列表 " : " 隐藏列表 " ; }Gridview嵌套前台代码:<asp:GridView ID="gvItem" Width="600px" OnRowDataBound="gvItem_RowCommand" DataKeyNames="ID" runat="server" AutoGenerateColumns="False"> <Columns> <asp:BoundField DataField="ID" HeaderStyle-Width="15%" HeaderText="ID"> <HeaderStyle Width="15%" /> </asp:BoundField> <asp:BoundField DataField="姓名" HeaderStyle-Width="30%" HeaderText="姓名"> <HeaderStyle Width="30%" /> </asp:BoundField> <asp:TemplateField HeaderStyle-Width="40%"> <ItemTemplate> <!---点击用于列表展开,执行JS函数---> <span id="btnShowHidden<%#Eval("ID") %>" style="float: right; color: Red; cursor: pointer; margin: 0 0 0 0" οnclick="ShowHidden('<%#Eval("ID") %>',event)">展开列表</span> <tr> <td colspan="100%"> <div id="div<%#Eval("ID") %>" style="display: none;"> <div style="float: left; font-size: small"> └</div> <div style="border: 1 solid RGB(40,80,150); position: relative; left: 0px; overflow: auto; width: 98%;"> <!---绑定内层Gridview---> <asp:GridView ID="gvInnerItem" Width="100%" Height="100%" runat="server" AutoGenerateColumns="false"> <Columns> <asp:BoundField DataField="ID" HeaderStyle-Width="15%" HeaderText="ID"> <HeaderStyle Width="15%" /> </asp:BoundField> <asp:BoundField DataField="姓名" HeaderStyle-Width="70%" HeaderText="姓名"> <HeaderStyle Width="70%" /> </asp:BoundField> </Columns> </asp:GridView> </div> </div> </td> </tr> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>