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.parentN