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;
        }