你的位置:首页 > ASP.net教程

[ASP.net教程]gridview展开嵌套显示


最近实在是太忙了,好几个月没有更新博客了,近来项目需要用到GRIDVIEW嵌套的,在这里跟大家分享一下,大家如有更好的解决方案,请不吝贴出。在ASP.NET中,GridView嵌套可以显示当前选定的父记录同时显示其子记录。例如,你可以创建按条件查找出相应项目的管理项目列表,同时可展开项目查看目前该项目进展到哪一阶段了。(如下图)

而这一使用的基本技术就是为父表创建一个GridView,它的每行又嵌入一个GridView,这些子GridView使用TemplateField来插入到父GridView中。唯一需要注意的是,不能在绑定父GridView的同时绑定子GridView,因为此时父行还没有被创建。而子GridView需要等待父GridView的DataBound时间发生。
      在这个示例中父GridView定义了自动产生列( AutoGenerateColumns="True"),我这里实际上使用了两个子GridView.

 <asp:TemplateColumn HeaderText="OPHist">              <HeaderStyle Width="40px" CssClass="12-head-pt"></HeaderStyle>                <ItemTemplate>                  <asp:Image ID="XXX" runat="server" ImageUrl="../image/plus.gif" AlternateText="ProjectHistory">                  </asp:Image>                  <asp:DataGrid ID="grdOPHistory" Style="left: 50px" runat="server" AutoGenerateColumns="True"                    BorderColor="MintCream" BorderWidth="1px" BackColor="White" CellPadding="1" ForeColor="Black">                    <SelectedItemStyle ForeColor="GhostWhite" BackColor="#CCCCCC"></SelectedItemStyle>                    <HeaderStyle Font-Bold="True" Width="40px" ForeColor="White" BackColor="#ff6666"></HeaderStyle>                                      </asp:DataGrid>                </ItemTemplate>              </asp:TemplateColumn>              <asp:TemplateColumn HeaderText="Status">                <HeaderStyle Width="40px" CssClass="12-head-pt"></HeaderStyle>                <ItemTemplate>                  <asp:Image ID="SHOW" runat="server" ImageUrl="../image/plus.gif" AlternateText="ProjectDetail">                  </asp:Image>                   <asp:DataGrid ID="grdProjectDetail1" onitemdatabound="grdProjectDetail1_ItemDataBound" Style="left: 50px" runat="server" AutoGenerateColumns="True">                    <ItemStyle BackColor="#B3D7F1"></ItemStyle>                    <HeaderStyle Font-Bold="True" Font-Size="10" Height="20px" ForeColor="black" CssClass="A"                      BackColor="#4791C5"></HeaderStyle>                                      </asp:DataGrid>                </ItemTemplate>              </asp:TemplateColumn>

这些GRIDVIEW都没有直接指定数据源。而是采用编程的形式来实现。下面贴出父GRIDVIEW的DataBound事件。

 private void grdProject_ItemDataBound(object sender, DataGridItemEventArgs e)    {      if (e.Item.DataItem is DataRowView)      {        string bindSql = @"EXEC SSM_SP_GETDTL @PROJECTNUM='" + ((Label)e.Item.FindControl("PROJECTNUM")).Text.Trim() + "', @REV='" + ((Label)e.Item.FindControl("REV")).Text.Trim() + "'";        base.doDataBind((DataGrid)e.Item.FindControl("grdProjectDetail1"), bindSql);        ((DataGrid)e.Item.FindControl("grdProjectDetail1")).Style.Add("display", "none");        bindSql = @"EXEC SSM_SP_GETOPHIST @PROJECTNUM='" + ((Label)e.Item.FindControl("PROJECTNUM")).Text.Trim() + "', @REV='" + ((Label)e.Item.FindControl("REV")).Text.Trim() + "'";        base.doDataBind((DataGrid)e.Item.FindControl("grdOPHistory"), bindSql);        ((DataGrid)e.Item.FindControl("grdOPHistory")).Style.Add("display", "none");        if (e.Item.FindControl("SHOW") != null)        {          ((Image)e.Item.FindControl("SHOW")).Attributes.Add("onclick", "HierarGrid_toggleRow(this,'grdProjectDetail1')");        }        if (e.Item.FindControl("XXX") != null)        {          ((Image)e.Item.FindControl("XXX")).Attributes.Add("onclick", "HierarGrid_toggleRow(this,'grdOPHistory')");        }        if ((e.Item.ItemType == ListItemType.Item) || (e.Item.ItemType == ListItemType.AlternatingItem))        {          string str2 = ((Label)e.Item.FindControl("PROJECTNUM")).Text.Trim();          string str3 = ((Label)e.Item.FindControl("REV")).Text.Trim();          ImageButton image = (ImageButton)e.Item.FindControl("btnEdit");          image.Attributes.Add("onclick", "window.open('SSMProjectDetail.aspx?PROJECTNUM=" + str2 + "&REV=" + str3 + "&Mode=Edit','_blank','top=10,left=10,width=1100,height=900,scrollbars=yes,resizable=yes')");                  }      }    }

 

 其实说白了也不难,但说不难也不容易。关键是前台面的HierarGrid_toggleRow怎么写。现将代码帖出,有不明白的地方请留言,如对您有帮助,请给个赞。

    function HierarGrid_toggleRow(sender, grd) {      if (sender == null)        return;      var state = 1;      //if the hidden row has not already been generated, clone the panel into a new row      var existingRow = window.document.getElementById(sender.id + "showRow");      if (existingRow == null) {        //getting a reference to the table        var table = GetParentElementByTagName(sender, "TABLE");        var index = GetParentElementByTagName(sender, "TR").sectionRowIndex + 1;        //concatenate name of hidden panel => replace "Icon" from sender.id with "Panel"\n        if (grd == "grdProjectDetail1") {          rowDivName = HierarGrid_ReplaceStr(sender.id, "SHOW", grd);        }        else {          rowDivName = HierarGrid_ReplaceStr(sender.id, "XXX", grd);        }        var rowDiv = window.document.getElementById(rowDivName);        //adding new row to table        var newRow = table.insertRow(index);        newRow.id = sender.id + "showRow";        //adding new cell to row        var newTD = document.createElement("TD");        if (table.rows[0].cells[0].colSpan > 1)          newTD.colSpan = table.rows[0].cells[0].colSpan;        else          newTD.colSpan = table.rows[0].cells.length;        var myTD = newRow.appendChild(newTD);        //clone Panel into new cell        var copy = rowDiv;        copy.style.display = "";        myTD.innerHTML = copy.outerHTML;        rowDiv.parentNode.removeChild(rowDiv);        sender.src = HierarGrid_ReplaceStr(sender.src, "plus", "minus");        state = 1;      }      else {        if (existingRow.style.display == "none") {          existingRow.style.display = "";          sender.src = HierarGrid_ReplaceStr(sender.src, "plus", "minus");          state = 1;        }        else {          existingRow.style.display = "none";          sender.src = HierarGrid_ReplaceStr(sender.src, "minus", "plus");          state = 0;        }      }      // ChangeRowState(sender, state);    }    function HierarGrid_ReplaceStr(orgString, findString, replString) {      pos = orgString.lastIndexOf(findString);      return orgString.substr(0, pos) + replString + orgString.substr(pos + findString.length);    }    function GetParentElementByTagName(element, tagName) {      var element = element;      while (element.tagName != tagName)        element = element.parentNode;      return element;    }

View Code