【转发】ASP.NET 简单的GridView嵌套实现_asp:gridview怎么被div包裹着-优快云博客

最近做一个项目，要在GridView中点开表单后展开明细信息，原来用过一些方法是用hidden然后用jq/js显示和缩放，我觉得页面太多js代码了而且我也不熟悉，所以用一个传统一点的方法，gridview嵌套，然后js只控制显示与否即可。

缺点是每页的父节点Gridview不能有太多明细行，不然的话嵌套出来太多信息页面加载估计会出问题。
重点是在于

子GridView实际上可以等同为新建了一个<tr></tr>，在里面显示；
而这个Gridviw要用DIV包起来，不然会撑爆整个父Girdview的单元格。
最终测试过在IE8非兼容模式可用，IE8往上的版本可用，Chrome目前也看到没什么问题。

借鉴的帖子如下：

JS代码，用于显示隐藏嵌套的GRIDVIEW：

JS部分代码

        /*隐藏嵌套的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" ? "展开列表" : "隐藏列表";
        }

ASPX前端代码

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" onclick="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)
  {        
      BindData();
  }

  //绑定外层Gridview列表
   public void BindData()
  {
      gvItem.DataSource = CommonClass.GetData("外层表格");
      gvItem.DataBind();
  }

  //绑定嵌套的Gridview列表
   protected void gvItem_RowCommand(object sender, GridViewRowEventArgs e)
  {
      if (e.Row.RowType == DataControlRowType.DataRow)
      {
          GridView oGridView = (GridView)e.Row.FindControl("gvInnerItem");
          if (oGridView != null)
          {
              int id = Convert.ToInt32(gvItem.DataKeys[e.Row.RowIndex].Value);
              oGridView.DataSource = CommonClass.GetData("内层表格ID=" + id);
              oGridView.DataBind();
          }
      }
  }