简单的GridView嵌套实现

具体效果如下：

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>
  
  

   
    后台代码：
  
  
  
  

   
     protected void Page_Load(object sender, EventArgs e)
 2     {        
 3         BindData();
 4     }
 5 
 6     //绑定外层Gridview列表
 7      public void BindData()
 8     {
 9         gvItem.DataSource = CommonClass.GetData("外层表格");
10         gvItem.DataBind();
11     }
12 
13     //绑定嵌套的Gridview列表
14      protected void gvItem_RowDataBound(object sender, GridViewRowEventArgs e)
15     {
16         if (e.Row.RowType == DataControlRowType.DataRow)
17         {
18             GridView oGridView = (GridView)e.Row.FindControl("gvInnerItem");
19             if (oGridView != null)
20             {
21                 int id = Convert.ToInt32(gvItem.DataKeys[e.Row.RowIndex].Value);
22                 oGridView.DataSource = CommonClass.GetData("内层表格ID=" + id);
23                 oGridView.DataBind();
24             }
25         }
26     }